@asante-org/leybold-design-system 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/README.md +163 -163
  2. package/dist/app/layout.d.ts +9 -0
  3. package/dist/app/page.d.ts +2 -0
  4. package/dist/assets/.gitkeep +2 -2
  5. package/dist/assets/desktop-layout-alt.svg +27 -27
  6. package/dist/assets/desktop-layout.svg +29 -29
  7. package/dist/assets/globe.svg +7 -7
  8. package/dist/assets/leybold-footer-logo.svg +19 -19
  9. package/dist/assets/leybold-white.svg +18 -18
  10. package/dist/assets/list-product-overlay-tip-active.svg +3 -3
  11. package/dist/assets/list-product-overlay-tip.svg +3 -3
  12. package/dist/assets/logo-example.svg +9 -9
  13. package/dist/assets/logo.svg +19 -19
  14. package/dist/assets/phone-layout.svg +14 -14
  15. package/dist/assets/red-tip.svg +10 -10
  16. package/dist/assets/tablet-layout.svg +28 -28
  17. package/dist/index.css +88 -0
  18. package/dist/index.d.ts +3 -0
  19. package/dist/index.esm.css +88 -0
  20. package/dist/index.esm.js +1066 -1093
  21. package/dist/index.esm.js.map +1 -1
  22. package/dist/index.js +1148 -1135
  23. package/dist/index.js.map +1 -1
  24. package/dist/src/experience/algolia-dynamic-search/AlgoliaDynamicSearch.d.ts +0 -1
  25. package/dist/src/experience/qr-form-journey/QrFormJourney.d.ts +0 -1
  26. package/dist/src/stories/foundation/Typography/TypographyComponents.d.ts +0 -1
  27. package/dist/src/types/cards.d.ts +3 -0
  28. package/dist/stories/components/Algolia-dynamic-search/algolia-dynamic-search.d.ts +4 -0
  29. package/dist/stories/components/Algolia-dynamic-search/algolia-dynamic-search.stories.d.ts +7 -0
  30. package/dist/stories/components/Button/Button.d.ts +35 -0
  31. package/dist/stories/components/Button/Button.stories.d.ts +15 -0
  32. package/dist/stories/components/Button/index.d.ts +2 -0
  33. package/dist/stories/components/QRFormJourney/Qr-form/Qr-form.d.ts +2 -0
  34. package/dist/stories/components/QRFormJourney/Qr-form/Qr-form.stories.d.ts +7 -0
  35. package/dist/tsconfig.tsbuildinfo +1 -1
  36. package/dist/utils/styles/index.d.ts +1 -0
  37. package/package.json +115 -115
  38. package/dist/.next/types/app/layout.d.ts +0 -9
  39. package/dist/.next/types/app/page.d.ts +0 -9
package/dist/index.esm.js CHANGED
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3
3
  import { faArrowLeft, faArrowLeftLong, faArrowRight, faArrowRightLong, faChevronRight, faChevronLeft, faArrowUpRightFromSquare, faGlobe, faXmark as faXmark$1 } from '@fortawesome/free-solid-svg-icons';
4
4
  import { faInstagram, faYoutube, faLinkedinIn, faXTwitter, faFacebookF } from '@fortawesome/free-brands-svg-icons';
5
5
  import { faChevronRight as faChevronRight$1, faArrowUpRightFromSquare as faArrowUpRightFromSquare$1 } from '@fortawesome/pro-solid-svg-icons';
6
- import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asantemedia-org/edwardsvacuum-design-system';
6
+ import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asante-org/edwardsvacuum-design-system';
7
7
 
8
8
  function _extends() {
9
9
  return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -15,45 +15,6 @@ function _extends() {
15
15
  }, _extends.apply(null, arguments);
16
16
  }
17
17
 
18
- /******************************************************************************
19
- Copyright (c) Microsoft Corporation.
20
-
21
- Permission to use, copy, modify, and/or distribute this software for any
22
- purpose with or without fee is hereby granted.
23
-
24
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
25
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
26
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
27
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
28
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
29
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
30
- PERFORMANCE OF THIS SOFTWARE.
31
- ***************************************************************************** */
32
- /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
33
-
34
- var __assign = function () {
35
- __assign = Object.assign || function __assign(t) {
36
- for (var s, i = 1, n = arguments.length; i < n; i++) {
37
- s = arguments[i];
38
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
39
- }
40
- return t;
41
- };
42
- return __assign.apply(this, arguments);
43
- };
44
- function __rest(s, e) {
45
- var t = {};
46
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
47
- if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
48
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
49
- }
50
- return t;
51
- }
52
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
53
- var e = new Error(message);
54
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
55
- };
56
-
57
18
  var styles$k = {"button":"Button-module__button___18Bed","button--primary":"Button-module__button--primary___VuF-P","button--disabled":"Button-module__button--disabled___IuOY8","button--secondary":"Button-module__button--secondary___lD5E3","button--solid-grey":"Button-module__button--solid-grey___oRbEy","button--solid-black":"Button-module__button--solid-black___1Ma5K","button--solid-white":"Button-module__button--solid-white___bE-Z0","button--outlined-grey":"Button-module__button--outlined-grey___xWGbB","button--outlined-black":"Button-module__button--outlined-black___qfX5o","button--outlined-white":"Button-module__button--outlined-white___QLXNP","button--link-text":"Button-module__button--link-text___R2kun","button__icon":"Button-module__button__icon___hlcHo","button--link-text-alt":"Button-module__button--link-text-alt___1p7wH","button--external-link":"Button-module__button--external-link___Mhxuk","button--carousel-arrow-left":"Button-module__button--carousel-arrow-left___Wx-Jo","button--carousel-arrow-right":"Button-module__button--carousel-arrow-right___3ZtgT","button__icon__default":"Button-module__button__icon__default___0qlF1","button__icon__hover":"Button-module__button__icon__hover___3xPGT","button--extra-small":"Button-module__button--extra-small___R0QTM","button--small":"Button-module__button--small___ADJQe","button--medium":"Button-module__button--medium___ZuR4Z","button--large":"Button-module__button--large___-FaV5","button__icon--left":"Button-module__button__icon--left___wMCeH","button__icon--right":"Button-module__button__icon--right___-pGHl"};
58
19
 
59
20
  function getDefaultExportFromCjs (x) {
@@ -131,10 +92,22 @@ function requireClassnames() {
131
92
  var classnamesExports = requireClassnames();
132
93
  var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
133
94
 
134
- /**
135
- * Get the icon component based on icon type
95
+ /**
96
+ * Button variant types
97
+ */
98
+
99
+ /**
100
+ * Icon types for button
101
+ */
102
+
103
+ /**
104
+ * Icon position
105
+ */
106
+
107
+ /**
108
+ * Get the icon component based on icon type
136
109
  */
137
- var getIcon = function (icon) {
110
+ const getIcon = icon => {
138
111
  switch (icon) {
139
112
  case "arrow-right":
140
113
  return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
@@ -156,10 +129,11 @@ var getIcon = function (icon) {
156
129
  return null;
157
130
  }
158
131
  };
159
- /**
160
- * Get default icon for certain variants
132
+
133
+ /**
134
+ * Get default icon for certain variants
161
135
  */
162
- var getDefaultIcon = function (variant) {
136
+ const getDefaultIcon = variant => {
163
137
  switch (variant) {
164
138
  case "link-text":
165
139
  case "link-text-alt":
@@ -176,10 +150,11 @@ var getDefaultIcon = function (variant) {
176
150
  return "none";
177
151
  }
178
152
  };
179
- /**
180
- * Map alias variants to their actual CSS class variants
153
+
154
+ /**
155
+ * Map alias variants to their actual CSS class variants
181
156
  */
182
- var mapVariantToClass = function (variant) {
157
+ const mapVariantToClass = variant => {
183
158
  switch (variant) {
184
159
  case "text":
185
160
  return "link-text";
@@ -187,41 +162,42 @@ var mapVariantToClass = function (variant) {
187
162
  return variant;
188
163
  }
189
164
  };
190
- /**
191
- * Primary UI component for user interaction
165
+
166
+ /**
167
+ * Primary UI component for user interaction
192
168
  */
193
- var Button = function (_a) {
194
- var _b;
195
- var children = _a.children,
196
- _c = _a.variant,
197
- variant = _c === void 0 ? "primary" : _c,
198
- _d = _a.size,
199
- size = _d === void 0 ? "medium" : _d,
200
- _e = _a.disabled,
201
- disabled = _e === void 0 ? false : _e,
202
- onClick = _a.onClick,
203
- _f = _a.type,
204
- type = _f === void 0 ? "button" : _f,
205
- className = _a.className,
206
- icon = _a.icon,
207
- _g = _a.iconPosition,
208
- iconPosition = _g === void 0 ? "right" : _g,
209
- ariaLabel = _a.ariaLabel;
210
- _a.opensInNewTab;
211
- var props = __rest(_a, ["children", "variant", "size", "disabled", "onClick", "type", "className", "icon", "iconPosition", "ariaLabel", "opensInNewTab"]);
169
+ const Button = ({
170
+ children,
171
+ variant = "primary",
172
+ size = "medium",
173
+ disabled = false,
174
+ onClick,
175
+ type = "button",
176
+ className,
177
+ icon,
178
+ iconPosition = "right",
179
+ ariaLabel,
180
+ opensInNewTab,
181
+ ...props
182
+ }) => {
212
183
  // Map alias variants to actual class names
213
- var cssVariant = mapVariantToClass(variant);
184
+ const cssVariant = mapVariantToClass(variant);
185
+
214
186
  // Determine the icon to display
215
- var displayIcon = icon !== null && icon !== void 0 ? icon : getDefaultIcon(variant);
216
- var iconElement = getIcon(displayIcon);
187
+ const displayIcon = icon ?? getDefaultIcon(variant);
188
+ const iconElement = getIcon(displayIcon);
189
+
217
190
  // Check if this is an icon-only button (carousel arrows)
218
- var isIconOnly = variant === "carousel-arrow-left" || variant === "carousel-arrow-right";
219
- var isCarouselLeft = variant === "carousel-arrow-left";
220
- var isCarouselRight = variant === "carousel-arrow-right";
221
- var buttonClasses = classNames(styles$k.button, styles$k["button--".concat(cssVariant)], styles$k["button--".concat(size)], (_b = {}, _b[styles$k["button--disabled"]] = disabled, _b), className);
222
- var iconClasses = classNames(styles$k.button__icon, styles$k["button__icon--".concat(iconPosition)]);
191
+ const isIconOnly = variant === "carousel-arrow-left" || variant === "carousel-arrow-right";
192
+ const isCarouselLeft = variant === "carousel-arrow-left";
193
+ const isCarouselRight = variant === "carousel-arrow-right";
194
+ const buttonClasses = classNames(styles$k.button, styles$k[`button--${cssVariant}`], styles$k[`button--${size}`], {
195
+ [styles$k["button--disabled"]]: disabled
196
+ }, className);
197
+ const iconClasses = classNames(styles$k.button__icon, styles$k[`button__icon--${iconPosition}`]);
198
+
223
199
  // Generate accessible label for icon-only buttons
224
- var accessibleLabel = ariaLabel || (isIconOnly ? variant === "carousel-arrow-left" ? "Previous" : "Next" : undefined);
200
+ const accessibleLabel = ariaLabel || (isIconOnly ? variant === "carousel-arrow-left" ? "Previous" : "Next" : undefined);
225
201
  return /*#__PURE__*/React.createElement("button", _extends({
226
202
  type: type,
227
203
  className: buttonClasses,
@@ -252,62 +228,64 @@ var Button = function (_a) {
252
228
 
253
229
  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"};
254
230
 
255
- /**
256
- * External link icon (↗) for footer links that open in new tabs
231
+ /**
232
+ * External link icon (↗) for footer links that open in new tabs
257
233
  */
258
- var ExternalLinkIcon = function (_a) {
259
- var className = _a.className,
260
- _b = _a.size,
261
- size = _b === void 0 ? 15 : _b;
262
- return /*#__PURE__*/React.createElement("svg", {
263
- width: size,
264
- height: size,
265
- viewBox: "0 0 15 15",
266
- fill: "none",
267
- xmlns: "http://www.w3.org/2000/svg",
268
- className: className,
269
- "aria-hidden": "true"
270
- }, /*#__PURE__*/React.createElement("path", {
271
- 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",
272
- stroke: "currentColor",
273
- strokeWidth: "1.5",
274
- strokeLinecap: "round",
275
- strokeLinejoin: "round"
276
- }));
277
- };
278
-
279
- /**
280
- * Atlas Copco Group badge icon (square)
234
+ const ExternalLinkIcon = ({
235
+ className,
236
+ size = 15
237
+ }) => /*#__PURE__*/React.createElement("svg", {
238
+ width: size,
239
+ height: size,
240
+ viewBox: "0 0 15 15",
241
+ fill: "none",
242
+ xmlns: "http://www.w3.org/2000/svg",
243
+ className: className,
244
+ "aria-hidden": "true"
245
+ }, /*#__PURE__*/React.createElement("path", {
246
+ 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",
247
+ stroke: "currentColor",
248
+ strokeWidth: "1.5",
249
+ strokeLinecap: "round",
250
+ strokeLinejoin: "round"
251
+ }));
252
+
253
+ /**
254
+ * Atlas Copco Group badge icon (square)
281
255
  */
282
- var AtlasCopcoIcon = function (_a) {
283
- var className = _a.className,
284
- _b = _a.size,
285
- size = _b === void 0 ? 14 : _b;
286
- return /*#__PURE__*/React.createElement("svg", {
287
- width: size,
288
- height: size,
289
- viewBox: "0 0 14 14",
290
- fill: "none",
291
- xmlns: "http://www.w3.org/2000/svg",
292
- className: className,
293
- "aria-hidden": "true"
294
- }, /*#__PURE__*/React.createElement("rect", {
295
- x: "0.5",
296
- y: "0.5",
297
- width: "13",
298
- height: "13",
299
- rx: "1.5",
300
- fill: "#D9D9D9",
301
- stroke: "#D9D9D9"
302
- }));
303
- };
256
+ const AtlasCopcoIcon = ({
257
+ className,
258
+ size = 14
259
+ }) => /*#__PURE__*/React.createElement("svg", {
260
+ width: size,
261
+ height: size,
262
+ viewBox: "0 0 14 14",
263
+ fill: "none",
264
+ xmlns: "http://www.w3.org/2000/svg",
265
+ className: className,
266
+ "aria-hidden": "true"
267
+ }, /*#__PURE__*/React.createElement("rect", {
268
+ x: "0.5",
269
+ y: "0.5",
270
+ width: "13",
271
+ height: "13",
272
+ rx: "1.5",
273
+ fill: "#D9D9D9",
274
+ stroke: "#D9D9D9"
275
+ }));
276
+
277
+ // =============================================================================
278
+ // TYPE DEFINITIONS
279
+ // =============================================================================
304
280
 
305
281
  // =============================================================================
306
282
  // SOCIAL ICON COMPONENT
307
283
  // =============================================================================
308
- var SocialIconComponent = function (_a) {
309
- var platform = _a.platform;
310
- var iconMap = {
284
+
285
+ const SocialIconComponent = ({
286
+ platform
287
+ }) => {
288
+ const iconMap = {
311
289
  facebook: faFacebookF,
312
290
  x: faXTwitter,
313
291
  linkedin: faLinkedinIn,
@@ -318,14 +296,19 @@ var SocialIconComponent = function (_a) {
318
296
  icon: iconMap[platform]
319
297
  });
320
298
  };
321
- var FooterLink = function (_a) {
322
- var item = _a.item,
323
- className = _a.className,
324
- _b = _a.variant,
325
- variant = _b === void 0 ? 'default' : _b;
326
- var baseClass = variant === 'bottom' ? styles$j.footer__bottomLink : styles$j.footer__link;
327
- var linkClasses = classNames(baseClass, className);
328
- var handleClick = function (e) {
299
+
300
+ // =============================================================================
301
+ // FOOTER LINK COMPONENT
302
+ // =============================================================================
303
+
304
+ const FooterLink = ({
305
+ item,
306
+ className,
307
+ variant = 'default'
308
+ }) => {
309
+ const baseClass = variant === 'bottom' ? styles$j.footer__bottomLink : styles$j.footer__link;
310
+ const linkClasses = classNames(baseClass, className);
311
+ const handleClick = e => {
329
312
  if (item.onClick) {
330
313
  e.preventDefault();
331
314
  item.onClick();
@@ -346,71 +329,89 @@ var FooterLink = function (_a) {
346
329
  size: 15
347
330
  })));
348
331
  };
349
- var FooterLinkGroup = function (_a) {
350
- var heading = _a.heading,
351
- links = _a.links,
352
- className = _a.className,
353
- children = _a.children;
332
+
333
+ // =============================================================================
334
+ // FOOTER LINK GROUP COMPONENT
335
+ // =============================================================================
336
+
337
+ const FooterLinkGroup = ({
338
+ heading,
339
+ links,
340
+ className,
341
+ children
342
+ }) => {
354
343
  return /*#__PURE__*/React.createElement("div", {
355
344
  className: classNames(styles$j.footer__linkGroup, className)
356
345
  }, /*#__PURE__*/React.createElement("h3", {
357
346
  className: styles$j.footer__linkHeading
358
347
  }, heading), /*#__PURE__*/React.createElement("ul", {
359
348
  className: styles$j.footer__linkList
360
- }, links.map(function (link, index) {
361
- return /*#__PURE__*/React.createElement("li", {
362
- key: index
363
- }, /*#__PURE__*/React.createElement(FooterLink, {
364
- item: link
365
- }));
366
- })), children);
349
+ }, links.map((link, index) => /*#__PURE__*/React.createElement("li", {
350
+ key: index
351
+ }, /*#__PURE__*/React.createElement(FooterLink, {
352
+ item: link
353
+ })))), children);
367
354
  };
368
- var FooterSocialIcons = function (_a) {
369
- var links = _a.links,
370
- className = _a.className;
355
+
356
+ // =============================================================================
357
+ // FOOTER SOCIAL ICONS COMPONENT
358
+ // =============================================================================
359
+
360
+ const FooterSocialIcons = ({
361
+ links,
362
+ className
363
+ }) => {
371
364
  return /*#__PURE__*/React.createElement("div", {
372
365
  className: classNames(styles$j.footer__socialIcons, className)
373
- }, links.map(function (link, index) {
374
- return /*#__PURE__*/React.createElement("a", {
375
- key: index,
376
- href: link.href,
377
- className: styles$j.footer__socialIcon,
378
- "aria-label": link.ariaLabel,
379
- target: "_blank",
380
- rel: "noopener noreferrer"
381
- }, /*#__PURE__*/React.createElement(SocialIconComponent, {
382
- platform: link.platform
383
- }));
384
- }));
366
+ }, links.map((link, index) => /*#__PURE__*/React.createElement("a", {
367
+ key: index,
368
+ href: link.href,
369
+ className: styles$j.footer__socialIcon,
370
+ "aria-label": link.ariaLabel,
371
+ target: "_blank",
372
+ rel: "noopener noreferrer"
373
+ }, /*#__PURE__*/React.createElement(SocialIconComponent, {
374
+ platform: link.platform
375
+ }))));
385
376
  };
386
- var FooterSocialIcon = function (_a) {
387
- var platform = _a.platform,
388
- className = _a.className;
389
- var iconClasses = classNames(styles$j.footer__socialIcon, className);
377
+
378
+ // =============================================================================
379
+ // FOOTER SOCIAL ICON (STANDALONE) COMPONENT
380
+ // =============================================================================
381
+
382
+ const FooterSocialIcon = ({
383
+ platform,
384
+ className
385
+ }) => {
386
+ const iconClasses = classNames(styles$j.footer__socialIcon, className);
390
387
  return /*#__PURE__*/React.createElement("span", {
391
388
  className: iconClasses
392
389
  }, /*#__PURE__*/React.createElement(SocialIconComponent, {
393
390
  platform: platform
394
391
  }));
395
392
  };
396
- var FooterBottom = function (_a) {
397
- var links = _a.links,
398
- copyright = _a.copyright,
399
- countrySelector = _a.countrySelector,
400
- className = _a.className;
393
+
394
+ // =============================================================================
395
+ // FOOTER BOTTOM COMPONENT
396
+ // =============================================================================
397
+
398
+ const FooterBottom = ({
399
+ links,
400
+ copyright,
401
+ countrySelector,
402
+ className
403
+ }) => {
401
404
  return /*#__PURE__*/React.createElement("div", {
402
405
  className: classNames(styles$j.footer__bottom, className)
403
406
  }, /*#__PURE__*/React.createElement("div", {
404
407
  className: styles$j.footer__bottomLeft
405
408
  }, /*#__PURE__*/React.createElement("div", {
406
409
  className: styles$j.footer__bottomLinks
407
- }, links.map(function (link, index) {
408
- return /*#__PURE__*/React.createElement(FooterLink, {
409
- key: index,
410
- item: link,
411
- variant: "bottom"
412
- });
413
- })), /*#__PURE__*/React.createElement("p", {
410
+ }, links.map((link, index) => /*#__PURE__*/React.createElement(FooterLink, {
411
+ key: index,
412
+ item: link,
413
+ variant: "bottom"
414
+ }))), /*#__PURE__*/React.createElement("p", {
414
415
  className: styles$j.footer__copyright
415
416
  }, copyright)), countrySelector && /*#__PURE__*/React.createElement("a", {
416
417
  href: countrySelector.href || '#',
@@ -421,61 +422,61 @@ var FooterBottom = function (_a) {
421
422
  icon: faGlobe
422
423
  })), countrySelector.label));
423
424
  };
425
+
424
426
  // =============================================================================
425
427
  // MAIN FOOTER COMPONENT
426
428
  // =============================================================================
427
- /**
428
- * Footer component with brand identity, navigation links, social icons, and legal information.
429
- * Supports two layout variants:
430
- * - desktop: Logo at top, 3-column main content
431
- * - mobile: Logo at bottom, stacked layout with CTA button
429
+
430
+ /**
431
+ * Footer component with brand identity, navigation links, social icons, and legal information.
432
+ * Supports two layout variants:
433
+ * - desktop: Logo at top, 3-column main content
434
+ * - mobile: Logo at bottom, stacked layout with CTA button
432
435
  */
433
- var Footer = function (_a) {
434
- var _b = _a.variant,
435
- variant = _b === void 0 ? 'desktop' : _b,
436
- logo = _a.logo,
437
- motto = _a.motto,
438
- atlasCopcoBadge = _a.atlasCopcoBadge,
439
- quickLinks = _a.quickLinks,
440
- _c = _a.quickLinksHeading,
441
- quickLinksHeading = _c === void 0 ? 'Quick links' : _c,
442
- contactLinks = _a.contactLinks,
443
- _d = _a.contactHeading,
444
- contactHeading = _d === void 0 ? 'Contact us' : _d,
445
- socialLinks = _a.socialLinks,
446
- contactFormButton = _a.contactFormButton,
447
- bottomLinks = _a.bottomLinks,
448
- copyright = _a.copyright,
449
- countrySelector = _a.countrySelector,
450
- className = _a.className;
451
- var isMobile = variant === 'mobile';
452
- var footerClasses = classNames(styles$j.footer, isMobile && styles$j['footer--mobile'], className);
453
- var LogoWrapper = logo.href ? 'a' : 'div';
454
- var logoProps = logo.href ? {
436
+ const Footer = ({
437
+ variant = 'desktop',
438
+ logo,
439
+ motto,
440
+ atlasCopcoBadge,
441
+ quickLinks,
442
+ quickLinksHeading = 'Quick links',
443
+ contactLinks,
444
+ contactHeading = 'Contact us',
445
+ socialLinks,
446
+ contactFormButton,
447
+ bottomLinks,
448
+ copyright,
449
+ countrySelector,
450
+ className
451
+ }) => {
452
+ const isMobile = variant === 'mobile';
453
+ const footerClasses = classNames(styles$j.footer, isMobile && styles$j['footer--mobile'], className);
454
+ const LogoWrapper = logo.href ? 'a' : 'div';
455
+ const logoProps = logo.href ? {
455
456
  href: logo.href,
456
457
  className: styles$j.footer__logo
457
458
  } : {
458
459
  className: styles$j.footer__logo
459
460
  };
461
+
460
462
  // Logo + Motto + Badge component (used in both layouts)
461
- var LogoSection = function () {
462
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LogoWrapper, logoProps, /*#__PURE__*/React.createElement("img", {
463
- src: logo.src,
464
- alt: logo.alt
465
- })), /*#__PURE__*/React.createElement("div", {
466
- className: styles$j.footer__leftCol
467
- }, /*#__PURE__*/React.createElement("h2", {
468
- className: styles$j.footer__motto
469
- }, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
470
- className: styles$j.footer__badge
471
- }, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
472
- className: styles$j.footer__badgeIcon
473
- }, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
474
- size: 14
475
- })), /*#__PURE__*/React.createElement("span", {
476
- className: styles$j.footer__badgeText
477
- }, atlasCopcoBadge.text))));
478
- };
463
+ const LogoSection = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LogoWrapper, logoProps, /*#__PURE__*/React.createElement("img", {
464
+ src: logo.src,
465
+ alt: logo.alt
466
+ })), /*#__PURE__*/React.createElement("div", {
467
+ className: styles$j.footer__leftCol
468
+ }, /*#__PURE__*/React.createElement("h2", {
469
+ className: styles$j.footer__motto
470
+ }, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
471
+ className: styles$j.footer__badge
472
+ }, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
473
+ className: styles$j.footer__badgeIcon
474
+ }, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
475
+ size: 14
476
+ })), /*#__PURE__*/React.createElement("span", {
477
+ className: styles$j.footer__badgeText
478
+ }, atlasCopcoBadge.text))));
479
+
479
480
  // Mobile layout: Links at top, logo/motto at bottom
480
481
  if (isMobile) {
481
482
  return /*#__PURE__*/React.createElement("footer", {
@@ -513,6 +514,7 @@ var Footer = function (_a) {
513
514
  className: styles$j.footer__brandSection
514
515
  }, /*#__PURE__*/React.createElement(LogoSection, null))));
515
516
  }
517
+
516
518
  // Desktop layout: Logo at top, 3-column main content
517
519
  return /*#__PURE__*/React.createElement("footer", {
518
520
  className: footerClasses
@@ -554,17 +556,18 @@ var Footer = function (_a) {
554
556
 
555
557
  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"};
556
558
 
557
- var PaginationItem = function (_a) {
558
- var page = _a.page,
559
- isActive = _a.isActive,
560
- onClick = _a.onClick,
561
- className = _a.className;
562
- var handleClick = function () {
559
+ const PaginationItem = ({
560
+ page,
561
+ isActive,
562
+ onClick,
563
+ className
564
+ }) => {
565
+ const handleClick = () => {
563
566
  if (!isActive) {
564
567
  onClick(page);
565
568
  }
566
569
  };
567
- var handleKeyDown = function (event) {
570
+ const handleKeyDown = event => {
568
571
  if (event.key === "Enter" || event.key === " ") {
569
572
  event.preventDefault();
570
573
  handleClick();
@@ -576,22 +579,23 @@ var PaginationItem = function (_a) {
576
579
  type: "button",
577
580
  onClick: handleClick,
578
581
  onKeyDown: handleKeyDown,
579
- className: "".concat(styles$i.pageButton, " ").concat(isActive ? styles$i.pageButtonActive : "", " ").concat(className || ""),
582
+ className: `${styles$i.pageButton} ${isActive ? styles$i.pageButtonActive : ""} ${className || ""}`,
580
583
  "aria-current": isActive ? "page" : undefined,
581
- "aria-label": "Page ".concat(page),
584
+ "aria-label": `Page ${page}`,
582
585
  disabled: isActive,
583
586
  tabIndex: isActive ? -1 : 0
584
587
  }, page));
585
588
  };
586
589
 
587
- var PaginationButton = function (_a) {
588
- var label = _a.label,
589
- disabled = _a.disabled,
590
- onClick = _a.onClick,
591
- direction = _a.direction,
592
- className = _a.className,
593
- ariaLabel = _a.ariaLabel;
594
- var handleKeyDown = function (event) {
590
+ const PaginationButton = ({
591
+ label,
592
+ disabled,
593
+ onClick,
594
+ direction,
595
+ className,
596
+ ariaLabel
597
+ }) => {
598
+ const handleKeyDown = event => {
595
599
  if (event.key === "Enter" || event.key === " ") {
596
600
  event.preventDefault();
597
601
  if (!disabled) {
@@ -606,7 +610,7 @@ var PaginationButton = function (_a) {
606
610
  onClick: onClick,
607
611
  onKeyDown: handleKeyDown,
608
612
  disabled: disabled,
609
- className: "".concat(styles$i.navButton, " ").concat(styles$i["navButton--".concat(direction)], " ").concat(disabled ? styles$i.navButtonDisabled : "", " ").concat(className || ""),
613
+ className: `${styles$i.navButton} ${styles$i[`navButton--${direction}`]} ${disabled ? styles$i.navButtonDisabled : ""} ${className || ""}`,
610
614
  "aria-label": ariaLabel || label,
611
615
  tabIndex: disabled ? -1 : 0
612
616
  }, /*#__PURE__*/React.createElement("span", null, label), direction === "next" && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
@@ -616,98 +620,98 @@ var PaginationButton = function (_a) {
616
620
  })));
617
621
  };
618
622
 
619
- var PaginationEllipsis = function (_a) {
620
- var className = _a.className;
623
+ const PaginationEllipsis = ({
624
+ className
625
+ }) => {
621
626
  return /*#__PURE__*/React.createElement("li", {
622
- className: "".concat(styles$i.paginationItem, " ").concat(styles$i.ellipsis),
627
+ className: `${styles$i.paginationItem} ${styles$i.ellipsis}`,
623
628
  "aria-hidden": "true"
624
629
  }, /*#__PURE__*/React.createElement("span", {
625
- className: "".concat(styles$i.ellipsisText, " ").concat(className || "")
630
+ className: `${styles$i.ellipsisText} ${className || ""}`
626
631
  }, "..."));
627
632
  };
628
633
 
629
- /**
630
- * Generate page numbers to display with ellipsis logic
634
+ /**
635
+ * Generate page numbers to display with ellipsis logic
631
636
  */
632
- var generatePageNumbers = function (currentPage, totalPages, maxVisiblePages) {
637
+ const generatePageNumbers = (currentPage, totalPages, maxVisiblePages) => {
633
638
  if (totalPages <= maxVisiblePages) {
634
639
  return Array.from({
635
640
  length: totalPages
636
- }, function (_, i) {
637
- return i + 1;
638
- });
641
+ }, (_, i) => i + 1);
639
642
  }
640
- var pages = [];
641
- var halfVisible = Math.floor(maxVisiblePages / 2);
643
+ const pages = [];
644
+ const halfVisible = Math.floor(maxVisiblePages / 2);
645
+
642
646
  // Always show first page
643
647
  pages.push(1);
644
- var startPage = Math.max(2, currentPage - halfVisible);
645
- var endPage = Math.min(totalPages - 1, currentPage + halfVisible);
648
+ let startPage = Math.max(2, currentPage - halfVisible);
649
+ let endPage = Math.min(totalPages - 1, currentPage + halfVisible);
650
+
646
651
  // Adjust if we're near the start
647
652
  if (currentPage <= halfVisible + 1) {
648
653
  endPage = Math.min(maxVisiblePages - 1, totalPages - 1);
649
654
  startPage = 2;
650
655
  }
656
+
651
657
  // Adjust if we're near the end
652
658
  if (currentPage >= totalPages - halfVisible) {
653
659
  startPage = Math.max(2, totalPages - maxVisiblePages + 2);
654
660
  endPage = totalPages - 1;
655
661
  }
662
+
656
663
  // Add ellipsis after first page if needed
657
664
  if (startPage > 2) {
658
665
  pages.push("ellipsis-start");
659
666
  }
667
+
660
668
  // Add middle pages
661
- for (var i = startPage; i <= endPage; i++) {
669
+ for (let i = startPage; i <= endPage; i++) {
662
670
  pages.push(i);
663
671
  }
672
+
664
673
  // Add ellipsis before last page if needed
665
674
  if (endPage < totalPages - 1) {
666
675
  pages.push("ellipsis-end");
667
676
  }
677
+
668
678
  // Always show last page
669
679
  if (totalPages > 1) {
670
680
  pages.push(totalPages);
671
681
  }
672
682
  return pages;
673
683
  };
674
- var Pagination = function (_a) {
675
- var currentPage = _a.currentPage,
676
- totalPages = _a.totalPages,
677
- onPageChange = _a.onPageChange,
678
- _b = _a.maxVisiblePages,
679
- maxVisiblePages = _b === void 0 ? 10 : _b,
680
- _c = _a.showPrevious,
681
- showPrevious = _c === void 0 ? true : _c,
682
- _d = _a.showNext,
683
- showNext = _d === void 0 ? true : _d,
684
- _e = _a.previousLabel,
685
- previousLabel = _e === void 0 ? "Previous" : _e,
686
- _f = _a.nextLabel,
687
- nextLabel = _f === void 0 ? "Next" : _f,
688
- className = _a.className,
689
- _g = _a.ariaLabel,
690
- ariaLabel = _g === void 0 ? "Pagination" : _g;
691
- var pageNumbers = useMemo(function () {
692
- return generatePageNumbers(currentPage, totalPages, maxVisiblePages);
693
- }, [currentPage, totalPages, maxVisiblePages]);
694
- var handlePageChange = function (page) {
684
+ const Pagination = ({
685
+ currentPage,
686
+ totalPages,
687
+ onPageChange,
688
+ maxVisiblePages = 10,
689
+ showPrevious = true,
690
+ showNext = true,
691
+ previousLabel = "Previous",
692
+ nextLabel = "Next",
693
+ className,
694
+ ariaLabel = "Pagination"
695
+ }) => {
696
+ const pageNumbers = useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
697
+ const handlePageChange = page => {
695
698
  if (page >= 1 && page <= totalPages && page !== currentPage) {
696
699
  onPageChange(page);
697
700
  }
698
701
  };
699
- var handlePrevious = function () {
702
+ const handlePrevious = () => {
700
703
  handlePageChange(currentPage - 1);
701
704
  };
702
- var handleNext = function () {
705
+ const handleNext = () => {
703
706
  handlePageChange(currentPage + 1);
704
707
  };
708
+
705
709
  // Don't render if there's only one page or no pages
706
710
  if (totalPages <= 1) {
707
711
  return null;
708
712
  }
709
713
  return /*#__PURE__*/React.createElement("nav", {
710
- className: "".concat(styles$i.pagination, " ").concat(className || ""),
714
+ className: `${styles$i.pagination} ${className || ""}`,
711
715
  "aria-label": ariaLabel,
712
716
  role: "navigation"
713
717
  }, /*#__PURE__*/React.createElement("div", {
@@ -720,10 +724,10 @@ var Pagination = function (_a) {
720
724
  onClick: handlePrevious,
721
725
  direction: "previous",
722
726
  ariaLabel: "Go to previous page"
723
- }), pageNumbers.map(function (page, index) {
727
+ }), pageNumbers.map((page, index) => {
724
728
  if (page === "ellipsis-start" || page === "ellipsis-end") {
725
729
  return /*#__PURE__*/React.createElement(PaginationEllipsis, {
726
- key: "ellipsis-".concat(index)
730
+ key: `ellipsis-${index}`
727
731
  });
728
732
  }
729
733
  return /*#__PURE__*/React.createElement(PaginationItem, {
@@ -745,76 +749,71 @@ var styles$h = {"productCard":"ProductCardHorizontal-module__productCard___Nl4jK
745
749
 
746
750
  var styles$g = {"imageContainer":"Image-module__imageContainer___iD5Kd","loading":"Image-module__loading___Sh1zO","image":"Image-module__image___1pa50","error":"Image-module__error___0LGZ2","skeleton":"Image-module__skeleton___0bGS6","shimmer":"Image-module__shimmer___aanrl","errorState":"Image-module__errorState___TjV-8","errorIcon":"Image-module__errorIcon___QCKvj","errorText":"Image-module__errorText___Q8pnb"};
747
751
 
748
- var Image = function (_a) {
749
- var src = _a.src,
750
- alt = _a.alt,
751
- width = _a.width,
752
- height = _a.height,
753
- _b = _a.loading,
754
- loading = _b === void 0 ? "lazy" : _b,
755
- _c = _a.decoding,
756
- decoding = _c === void 0 ? "async" : _c,
757
- _d = _a.objectFit,
758
- objectFit = _d === void 0 ? "cover" : _d,
759
- _e = _a.objectPosition,
760
- objectPosition = _e === void 0 ? "center" : _e,
761
- aspectRatio = _a.aspectRatio,
762
- _f = _a.isDecorative,
763
- isDecorative = _f === void 0 ? false : _f,
764
- fallbackSrc = _a.fallbackSrc,
765
- onLoad = _a.onLoad,
766
- onError = _a.onError,
767
- _g = _a.className,
768
- className = _g === void 0 ? "" : _g,
769
- srcSet = _a.srcSet,
770
- sizes = _a.sizes;
771
- var _h = useState(true),
772
- isLoading = _h[0],
773
- setIsLoading = _h[1];
774
- var _j = useState(false),
775
- hasError = _j[0],
776
- setHasError = _j[1];
777
- var _k = useState(src),
778
- currentSrc = _k[0],
779
- setCurrentSrc = _k[1];
780
- var handleLoad = useCallback(function () {
752
+ const Image = ({
753
+ src,
754
+ alt,
755
+ width,
756
+ height,
757
+ loading = "lazy",
758
+ decoding = "async",
759
+ objectFit = "cover",
760
+ objectPosition = "center",
761
+ aspectRatio,
762
+ isDecorative = false,
763
+ fallbackSrc,
764
+ onLoad,
765
+ onError,
766
+ className = "",
767
+ srcSet,
768
+ sizes
769
+ }) => {
770
+ const [isLoading, setIsLoading] = useState(true);
771
+ const [hasError, setHasError] = useState(false);
772
+ const [currentSrc, setCurrentSrc] = useState(src);
773
+ const handleLoad = useCallback(() => {
781
774
  setIsLoading(false);
782
775
  setHasError(false);
783
- onLoad === null || onLoad === void 0 ? void 0 : onLoad();
776
+ onLoad?.();
784
777
  }, [onLoad]);
785
- var handleError = useCallback(function () {
778
+ const handleError = useCallback(() => {
786
779
  setIsLoading(false);
787
780
  setHasError(true);
781
+
788
782
  // Try fallback if available and not already using it
789
783
  if (fallbackSrc && currentSrc !== fallbackSrc) {
790
784
  setCurrentSrc(fallbackSrc);
791
785
  setHasError(false);
792
786
  setIsLoading(true);
793
787
  } else {
794
- onError === null || onError === void 0 ? void 0 : onError();
788
+ onError?.();
795
789
  }
796
790
  }, [fallbackSrc, currentSrc, onError]);
791
+
797
792
  // Accessibility: decorative images should have empty alt and be hidden from screen readers
798
- var accessibilityProps = isDecorative ? {
793
+ const accessibilityProps = isDecorative ? {
799
794
  alt: "",
800
795
  "aria-hidden": true,
801
796
  role: "presentation"
802
797
  } : {
803
- alt: alt
798
+ alt
804
799
  };
805
- var containerStyle = __assign(__assign(__assign({}, aspectRatio && {
806
- aspectRatio: aspectRatio
807
- }), width && {
808
- width: typeof width === "number" ? "".concat(width, "px") : width
809
- }), height && {
810
- height: typeof height === "number" ? "".concat(height, "px") : height
811
- });
812
- var imageStyle = {
813
- objectFit: objectFit,
814
- objectPosition: objectPosition
800
+ const containerStyle = {
801
+ ...(aspectRatio && {
802
+ aspectRatio
803
+ }),
804
+ ...(width && {
805
+ width: typeof width === "number" ? `${width}px` : width
806
+ }),
807
+ ...(height && {
808
+ height: typeof height === "number" ? `${height}px` : height
809
+ })
810
+ };
811
+ const imageStyle = {
812
+ objectFit,
813
+ objectPosition
815
814
  };
816
815
  return /*#__PURE__*/React.createElement("div", {
817
- className: "".concat(styles$g.imageContainer, " ").concat(className, " ").concat(isLoading ? styles$g.loading : "", " ").concat(hasError ? styles$g.error : ""),
816
+ className: `${styles$g.imageContainer} ${className} ${isLoading ? styles$g.loading : ""} ${hasError ? styles$g.error : ""}`,
818
817
  style: containerStyle
819
818
  }, isLoading && /*#__PURE__*/React.createElement("div", {
820
819
  className: styles$g.skeleton,
@@ -877,26 +876,28 @@ const faArrowUpRight = {
877
876
  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"]
878
877
  };
879
878
 
880
- var ProductCardHorizontal = function (_a) {
881
- _a.id;
882
- var imageUrl = _a.imageUrl,
883
- url = _a.url,
884
- title = _a.title;
885
- _a.description;
886
- var price = _a.price,
887
- productId = _a.productId,
888
- button = _a.button,
889
- _b = _a.className,
890
- className = _b === void 0 ? "" : _b;
879
+ const ProductCardHorizontal = ({
880
+ id,
881
+ imageUrl,
882
+ url,
883
+ title,
884
+ description,
885
+ price,
886
+ productId,
887
+ button,
888
+ utm,
889
+ className = ""
890
+ }) => {
891
891
  if (!title) {
892
892
  return null;
893
893
  }
894
+ const href = !utm || url && url.indexOf("utm") > -1 ? url : url + `?utm_source=${utm.utmSource}&utm_medium=${utm.utmMedium}&utm_campaign=${utm.utmCampaign}`;
894
895
  return /*#__PURE__*/React.createElement("a", {
895
- href: url,
896
- className: "".concat(styles$h.productCard, " ").concat(className),
897
- "aria-label": "View product: ".concat(title)
896
+ href: href,
897
+ className: `${styles$h.productCard} ${className}`,
898
+ "aria-label": `View product: ${title}`
898
899
  }, /*#__PURE__*/React.createElement("div", {
899
- className: "".concat(styles$h.productWrapper, " ").concat(imageUrl ? styles$h.withImage : "")
900
+ className: `${styles$h.productWrapper} ${imageUrl ? styles$h.withImage : ""}`
900
901
  }, imageUrl && /*#__PURE__*/React.createElement("div", {
901
902
  className: styles$h.productImage
902
903
  }, /*#__PURE__*/React.createElement(Image, {
@@ -922,61 +923,66 @@ var ProductCardHorizontal = function (_a) {
922
923
  "aria-hidden": "true"
923
924
  }))));
924
925
  };
926
+
925
927
  // Alias for backward compatibility
926
- var ProductCardHorizontalParts = ProductCardHorizontal;
928
+ const ProductCardHorizontalParts = ProductCardHorizontal;
927
929
 
928
930
  var styles$f = {"productDetails":"ProductCardDetails-module__productDetails___-sx2l","spareCard":"ProductCardDetails-module__spareCard___vC1Ju"};
929
931
 
930
932
  // Adapter to map design system props to ProductCardHorizontalParts props
931
- var SpareCardAdapter = function (props) {
932
- var spare = props.spare,
933
- rest = __rest(props, ["spare"]);
933
+ const SpareCardAdapter = props => {
934
+ const {
935
+ spare,
936
+ ...rest
937
+ } = props;
934
938
  return /*#__PURE__*/React.createElement(ProductCardHorizontalParts, {
935
939
  className: styles$f.spareCard,
936
- url: (spare === null || spare === void 0 ? void 0 : spare.url) || (spare === null || spare === void 0 ? void 0 : spare.link) || "#",
937
- title: (spare === null || spare === void 0 ? void 0 : spare.name) || (spare === null || spare === void 0 ? void 0 : spare.title) || "",
938
- description: (spare === null || spare === void 0 ? void 0 : spare.description) || "",
939
- price: (spare === null || spare === void 0 ? void 0 : spare.priceValue) || (spare === null || spare === void 0 ? void 0 : spare.price) || "",
940
- imageUrl: (spare === null || spare === void 0 ? void 0 : spare["img-product"]) || (spare === null || spare === void 0 ? void 0 : spare.image) || "",
940
+ url: spare?.url || spare?.link || "#",
941
+ title: spare?.name || spare?.title || "",
942
+ description: spare?.description || "",
943
+ price: spare?.priceValue || spare?.price || "",
944
+ imageUrl: spare?.["img-product"] || spare?.image || "",
945
+ utm: props.utm,
941
946
  button: {
942
947
  label: rest.cta || "View Product",
943
- onClick: function () {
944
- return window.open((spare === null || spare === void 0 ? void 0 : spare.url) || (spare === null || spare === void 0 ? void 0 : spare.link) || "#", "_blank");
945
- }
948
+ onClick: () => window.open(spare?.url || spare?.link || "#", "_blank")
946
949
  }
947
950
  });
948
951
  };
952
+
949
953
  // Re-export the design system component with Leybold styling
950
- var ProductCardDetails = function (_a) {
951
- var id = _a.id,
952
- imageUrl = _a.imageUrl,
953
- title = _a.title,
954
- description = _a.description,
955
- price = _a.price,
956
- code = _a.code,
957
- facets = _a.facets,
958
- hit = _a.hit,
959
- _b = _a.className,
960
- className = _b === void 0 ? "" : _b,
961
- ProductCardComponent = _a.ProductCardComponent,
962
- hidespares = _a.hidespares;
954
+ const ProductCardDetails = ({
955
+ id,
956
+ imageUrl,
957
+ title,
958
+ description,
959
+ price,
960
+ code,
961
+ facets,
962
+ hit,
963
+ utm,
964
+ className = "",
965
+ ProductCardComponent,
966
+ hidespares
967
+ }) => {
963
968
  // Build the hit object expected by ProductDetailsCard
964
- var hitData = hit || {
965
- id: id,
966
- title: title,
967
- description: description,
968
- price: price,
969
- code: code,
969
+ const hitData = hit || {
970
+ id,
971
+ title,
972
+ description,
973
+ price,
974
+ code,
970
975
  image: imageUrl
971
976
  };
972
977
  return /*#__PURE__*/React.createElement("div", {
973
978
  className: styles$f.productDetails
974
979
  }, /*#__PURE__*/React.createElement(ProductDetailsCard, {
975
- className: "".concat(className),
980
+ className: `${className}`,
976
981
  title: title,
977
982
  imageUrl: imageUrl,
978
983
  imageAlt: title,
979
984
  hit: hitData,
985
+ utm: utm,
980
986
  facets: facets,
981
987
  usePlainClasses: true,
982
988
  ProductCardComponent: ProductCardComponent || SpareCardAdapter,
@@ -986,68 +992,74 @@ var ProductCardDetails = function (_a) {
986
992
 
987
993
  // Adapter component that maps props from AlgoliaDynamicSearchRaw to ProductCardHorizontal
988
994
  // AlgoliaDynamicSearchRaw passes: title, cardLink, productPrice, cta, hit (original data)
989
- var ProductCardAdapter = function (props) {
990
- var hit = props.hit,
991
- title = props.title,
992
- cardLink = props.cardLink,
993
- productPrice = props.productPrice,
994
- cta = props.cta,
995
- showProductPrice = props.showProductPrice,
996
- className = props.className,
997
- code = props.code;
995
+ const ProductCardAdapter = props => {
996
+ const {
997
+ hit,
998
+ title,
999
+ cardLink,
1000
+ productPrice,
1001
+ cta,
1002
+ showProductPrice,
1003
+ className,
1004
+ code,
1005
+ utm
1006
+ } = props;
998
1007
  console.log(props);
999
1008
  // Get values from direct props or fallback to hit object
1000
- var url = cardLink || (hit === null || hit === void 0 ? void 0 : hit.link) || "#";
1001
- var imageUrl = "";
1002
- var price = showProductPrice ? productPrice || (hit === null || hit === void 0 ? void 0 : hit.price) || "" : "";
1003
- var productTitle = title || (hit === null || hit === void 0 ? void 0 : hit.title) || "";
1004
- var productCode = code || (hit === null || hit === void 0 ? void 0 : hit.code) || "";
1005
- var buttonLabel = cta || "View Product";
1009
+ const url = cardLink || hit?.link || "#";
1010
+ const imageUrl = "";
1011
+ const price = showProductPrice ? productPrice || hit?.price || "" : "";
1012
+ const productTitle = title || hit?.title || "";
1013
+ const productCode = code || hit?.code || "";
1014
+ const buttonLabel = cta || "View Product";
1006
1015
  return /*#__PURE__*/React.createElement(ProductCardHorizontalParts, {
1007
1016
  imageUrl: imageUrl,
1008
1017
  url: url,
1018
+ utm: utm,
1009
1019
  title: productTitle,
1010
1020
  description: productCode,
1011
1021
  price: price,
1012
1022
  button: {
1013
1023
  label: buttonLabel,
1014
- onClick: function () {
1015
- return window.open(url, "_blank");
1016
- }
1024
+ onClick: () => window.open(url, "_blank")
1017
1025
  },
1018
1026
  className: className
1019
1027
  });
1020
1028
  };
1021
- var ProductCardDetailsAdapter = function (props) {
1022
- var hit = props.hit,
1023
- title = props.title;
1024
- props.cardLink;
1025
- var productPrice = props.productPrice;
1026
- props.cta;
1027
- props.showProductPrice;
1028
- var className = props.className,
1029
- code = props.code,
1030
- facets = props.facets,
1031
- related_products = props.related_products,
1032
- hidespares = props.hidespares;
1029
+ const ProductCardDetailsAdapter = props => {
1030
+ const {
1031
+ hit,
1032
+ title,
1033
+ cardLink,
1034
+ productPrice,
1035
+ cta,
1036
+ showProductPrice,
1037
+ className,
1038
+ code,
1039
+ utm,
1040
+ facets,
1041
+ related_products,
1042
+ hidespares
1043
+ } = props;
1033
1044
  if (!title) {
1034
1045
  return null;
1035
1046
  }
1036
1047
  return /*#__PURE__*/React.createElement(ProductCardDetails, {
1037
- imageUrl: (hit === null || hit === void 0 ? void 0 : hit.image) || "",
1048
+ imageUrl: hit?.image || "",
1038
1049
  title: title,
1039
- description: (hit === null || hit === void 0 ? void 0 : hit.description) || "",
1040
- price: (hit === null || hit === void 0 ? void 0 : hit.price) || "" || productPrice,
1041
- code: (hit === null || hit === void 0 ? void 0 : hit.code) || "" || code,
1050
+ description: hit?.description || "",
1051
+ price: hit?.price || "" || productPrice,
1052
+ code: hit?.code || "" || code,
1042
1053
  hit: hit,
1054
+ utm: utm,
1043
1055
  className: className,
1044
1056
  facets: facets,
1045
- relatedProducts: (hit === null || hit === void 0 ? void 0 : hit.related_products) || related_products,
1057
+ relatedProducts: hit?.related_products || related_products,
1046
1058
  hidespares: hidespares
1047
1059
  });
1048
1060
  };
1049
- var AlgoliaDynamicSearchLeybold = function (props) {
1050
- var innerComponents = {
1061
+ const AlgoliaDynamicSearchLeybold = props => {
1062
+ const innerComponents = {
1051
1063
  ProductCard: ProductCardAdapter,
1052
1064
  ProductDetailsCard: ProductCardDetailsAdapter
1053
1065
  };
@@ -1056,20 +1068,22 @@ var AlgoliaDynamicSearchLeybold = function (props) {
1056
1068
  }));
1057
1069
  };
1058
1070
 
1059
- var QrFormButtonAdapter = function (_a) {
1060
- var label = _a.label,
1061
- onClick = _a.onClick,
1062
- _b = _a.buttonStyle,
1063
- buttonStyle = _b === void 0 ? "primary" : _b,
1064
- href = _a.href,
1065
- target = _a.target,
1066
- _c = _a.type,
1067
- type = _c === void 0 ? "button" : _c,
1068
- element = _a.element,
1069
- pageTarget = _a["data-page_target"],
1070
- className = _a.className;
1071
+ // Adapter to map QrForm's expected button props to our Button component
1072
+
1073
+ const QrFormButtonAdapter = ({
1074
+ label,
1075
+ onClick,
1076
+ buttonStyle = "primary",
1077
+ href,
1078
+ target,
1079
+ type = "button",
1080
+ element,
1081
+ "data-page_target": pageTarget,
1082
+ className
1083
+ }) => {
1071
1084
  // Map buttonStyle to our variant
1072
- var variant = buttonStyle === "secondary" ? "secondary" : "primary";
1085
+ const variant = buttonStyle === "secondary" ? "secondary" : "primary";
1086
+
1073
1087
  // If it's an anchor element (has href or element='a'), render as link
1074
1088
  if (element === "a" || href) {
1075
1089
  return /*#__PURE__*/React.createElement("a", {
@@ -1088,19 +1102,18 @@ var QrFormButtonAdapter = function (_a) {
1088
1102
  size: "small"
1089
1103
  }, label));
1090
1104
  }
1105
+
1091
1106
  // Otherwise render as button
1092
1107
  return /*#__PURE__*/React.createElement(Button, {
1093
1108
  variant: variant,
1094
1109
  type: type,
1095
- onClick: onClick ? function (e) {
1096
- return onClick(e);
1097
- } : undefined,
1110
+ onClick: onClick ? e => onClick(e) : undefined,
1098
1111
  className: className,
1099
1112
  "data-page_target": pageTarget,
1100
1113
  size: "small"
1101
1114
  }, label);
1102
1115
  };
1103
- var QrFormLeybold = function (props) {
1116
+ const QrFormLeybold = props => {
1104
1117
  return /*#__PURE__*/React.createElement("div", {
1105
1118
  className: "qr-journey-form-wrapper"
1106
1119
  }, /*#__PURE__*/React.createElement(QrForm, _extends({}, props, {
@@ -1110,17 +1123,16 @@ var QrFormLeybold = function (props) {
1110
1123
 
1111
1124
  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"};
1112
1125
 
1113
- var ModalCloseButton = function (_a) {
1114
- var onClick = _a.onClick,
1115
- _b = _a.ariaLabel,
1116
- ariaLabel = _b === void 0 ? 'Close search' : _b,
1117
- _c = _a.className,
1118
- className = _c === void 0 ? '' : _c;
1126
+ const ModalCloseButton = ({
1127
+ onClick,
1128
+ ariaLabel = 'Close search',
1129
+ className = ''
1130
+ }) => {
1119
1131
  return /*#__PURE__*/React.createElement("button", {
1120
1132
  type: "button",
1121
1133
  onClick: onClick,
1122
1134
  "aria-label": ariaLabel,
1123
- className: "".concat(styles$e.closeButton, " ").concat(className)
1135
+ className: `${styles$e.closeButton} ${className}`
1124
1136
  }, /*#__PURE__*/React.createElement("span", {
1125
1137
  className: styles$e.closeButton__icon
1126
1138
  }, /*#__PURE__*/React.createElement("svg", {
@@ -1147,80 +1159,79 @@ var ModalCloseButton = function (_a) {
1147
1159
  }, "CLOSE X"));
1148
1160
  };
1149
1161
 
1150
- var SearchModal = function (_a) {
1151
- var isOpen = _a.isOpen,
1152
- onClose = _a.onClose,
1153
- _b = _a.title,
1154
- title = _b === void 0 ? 'Search' : _b,
1155
- children = _a.children,
1156
- _c = _a.className,
1157
- className = _c === void 0 ? '' : _c,
1158
- stickyHeaderContent = _a.stickyHeaderContent;
1159
- var modalRef = useRef(null);
1160
- var previouslyFocusedElement = useRef(null);
1161
- useEffect(function () {
1162
+ const SearchModal = ({
1163
+ isOpen,
1164
+ onClose,
1165
+ title = 'Search',
1166
+ children,
1167
+ className = '',
1168
+ stickyHeaderContent
1169
+ }) => {
1170
+ const modalRef = useRef(null);
1171
+ const previouslyFocusedElement = useRef(null);
1172
+ useEffect(() => {
1162
1173
  if (isOpen) {
1163
1174
  // Store the previously focused element
1164
1175
  previouslyFocusedElement.current = document.activeElement;
1176
+
1165
1177
  // Focus the modal
1166
1178
  if (modalRef.current) {
1167
1179
  modalRef.current.focus();
1168
1180
  }
1181
+
1169
1182
  // Prevent body scroll
1170
1183
  document.body.style.overflow = 'hidden';
1171
1184
  } else {
1172
1185
  // Restore body scroll
1173
1186
  document.body.style.overflow = '';
1187
+
1174
1188
  // Return focus to previously focused element
1175
1189
  if (previouslyFocusedElement.current) {
1176
1190
  previouslyFocusedElement.current.focus();
1177
1191
  }
1178
1192
  }
1179
- return function () {
1193
+ return () => {
1180
1194
  document.body.style.overflow = '';
1181
1195
  };
1182
1196
  }, [isOpen]);
1183
- useEffect(function () {
1184
- var handleEscape = function (event) {
1197
+ useEffect(() => {
1198
+ const handleEscape = event => {
1185
1199
  if (event.key === 'Escape' && isOpen) {
1186
1200
  onClose();
1187
1201
  }
1188
1202
  };
1189
1203
  document.addEventListener('keydown', handleEscape);
1190
- return function () {
1191
- return document.removeEventListener('keydown', handleEscape);
1192
- };
1204
+ return () => document.removeEventListener('keydown', handleEscape);
1193
1205
  }, [isOpen, onClose]);
1206
+
1194
1207
  // Focus trap implementation
1195
- useEffect(function () {
1208
+ useEffect(() => {
1196
1209
  if (!isOpen || !modalRef.current) return;
1197
- var modal = modalRef.current;
1198
- var focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
1199
- var firstElement = focusableElements[0];
1200
- var lastElement = focusableElements[focusableElements.length - 1];
1201
- var handleTab = function (event) {
1210
+ const modal = modalRef.current;
1211
+ const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
1212
+ const firstElement = focusableElements[0];
1213
+ const lastElement = focusableElements[focusableElements.length - 1];
1214
+ const handleTab = event => {
1202
1215
  if (event.key !== 'Tab') return;
1203
1216
  if (event.shiftKey) {
1204
1217
  // Shift + Tab
1205
1218
  if (document.activeElement === firstElement) {
1206
1219
  event.preventDefault();
1207
- lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
1220
+ lastElement?.focus();
1208
1221
  }
1209
1222
  } else {
1210
1223
  // Tab
1211
1224
  if (document.activeElement === lastElement) {
1212
1225
  event.preventDefault();
1213
- firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
1226
+ firstElement?.focus();
1214
1227
  }
1215
1228
  }
1216
1229
  };
1217
1230
  modal.addEventListener('keydown', handleTab);
1218
- return function () {
1219
- return modal.removeEventListener('keydown', handleTab);
1220
- };
1231
+ return () => modal.removeEventListener('keydown', handleTab);
1221
1232
  }, [isOpen]);
1222
1233
  if (!isOpen) return null;
1223
- var handleOverlayClick = function (event) {
1234
+ const handleOverlayClick = event => {
1224
1235
  if (event.target === event.currentTarget) {
1225
1236
  onClose();
1226
1237
  }
@@ -1235,7 +1246,7 @@ var SearchModal = function (_a) {
1235
1246
  "aria-modal": "true",
1236
1247
  "aria-label": title,
1237
1248
  tabIndex: -1,
1238
- className: "".concat(styles$e.modal, " ").concat(className)
1249
+ className: `${styles$e.modal} ${className}`
1239
1250
  }, /*#__PURE__*/React.createElement("div", {
1240
1251
  className: styles$e.stickyHeader
1241
1252
  }, /*#__PURE__*/React.createElement(ModalCloseButton, {
@@ -1251,11 +1262,11 @@ var SearchModal = function (_a) {
1251
1262
 
1252
1263
  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"};
1253
1264
 
1254
- var SearchIcon = function (_a) {
1255
- var _b = _a.className,
1256
- className = _b === void 0 ? '' : _b;
1265
+ const SearchIcon = ({
1266
+ className = ''
1267
+ }) => {
1257
1268
  return /*#__PURE__*/React.createElement("svg", {
1258
- className: "".concat(styles$d.searchIcon, " ").concat(className),
1269
+ className: `${styles$d.searchIcon} ${className}`,
1259
1270
  xmlns: "http://www.w3.org/2000/svg",
1260
1271
  viewBox: "0 0 24 24",
1261
1272
  fill: "none",
@@ -1273,17 +1284,15 @@ var SearchIcon = function (_a) {
1273
1284
  }));
1274
1285
  };
1275
1286
 
1276
- var SearchInput = function (_a) {
1277
- var value = _a.value,
1278
- onChange = _a.onChange,
1279
- onKeyDown = _a.onKeyDown,
1280
- _b = _a.placeholder,
1281
- placeholder = _b === void 0 ? 'Discover products, innovations, and resources...' : _b,
1282
- _c = _a.autoFocus,
1283
- autoFocus = _c === void 0 ? false : _c,
1284
- _d = _a.className,
1285
- className = _d === void 0 ? '' : _d;
1286
- var handleChange = function (event) {
1287
+ const SearchInput = ({
1288
+ value,
1289
+ onChange,
1290
+ onKeyDown,
1291
+ placeholder = 'Discover products, innovations, and resources...',
1292
+ autoFocus = false,
1293
+ className = ''
1294
+ }) => {
1295
+ const handleChange = event => {
1287
1296
  onChange(event.target.value);
1288
1297
  };
1289
1298
  return /*#__PURE__*/React.createElement("input", {
@@ -1294,27 +1303,24 @@ var SearchInput = function (_a) {
1294
1303
  placeholder: placeholder,
1295
1304
  autoFocus: autoFocus,
1296
1305
  "aria-label": "Search",
1297
- className: "".concat(styles$d.searchInput, " ").concat(className)
1306
+ className: `${styles$d.searchInput} ${className}`
1298
1307
  });
1299
1308
  };
1300
1309
 
1301
- var SearchSubmitButton = function (_a) {
1302
- var onClick = _a.onClick,
1303
- _b = _a.disabled,
1304
- disabled = _b === void 0 ? false : _b,
1305
- _c = _a.ariaLabel,
1306
- ariaLabel = _c === void 0 ? 'Search' : _c,
1307
- _d = _a.label,
1308
- label = _d === void 0 ? 'Search' : _d;
1309
- _a.variant;
1310
- var _f = _a.className,
1311
- className = _f === void 0 ? '' : _f;
1310
+ const SearchSubmitButton = ({
1311
+ onClick,
1312
+ disabled = false,
1313
+ ariaLabel = 'Search',
1314
+ label = 'Search',
1315
+ variant = 'instant',
1316
+ className = ''
1317
+ }) => {
1312
1318
  return /*#__PURE__*/React.createElement("button", {
1313
1319
  type: "submit",
1314
1320
  onClick: onClick,
1315
1321
  disabled: disabled,
1316
1322
  "aria-label": ariaLabel,
1317
- className: "".concat(styles$d.submitButton, " ").concat(className)
1323
+ className: `${styles$d.submitButton} ${className}`
1318
1324
  }, /*#__PURE__*/React.createElement("span", {
1319
1325
  className: styles$d.submitButton__text
1320
1326
  }, label), /*#__PURE__*/React.createElement("span", {
@@ -1322,34 +1328,32 @@ var SearchSubmitButton = function (_a) {
1322
1328
  }, /*#__PURE__*/React.createElement(SearchIcon, null)));
1323
1329
  };
1324
1330
 
1325
- var SearchBar = function (_a) {
1326
- var value = _a.value,
1327
- onChange = _a.onChange,
1328
- onSubmit = _a.onSubmit,
1329
- placeholder = _a.placeholder,
1330
- _b = _a.autoFocus,
1331
- autoFocus = _b === void 0 ? false : _b,
1332
- _c = _a.className,
1333
- className = _c === void 0 ? '' : _c,
1334
- _d = _a.variant,
1335
- variant = _d === void 0 ? 'instant' : _d;
1336
- var handleSubmit = function (event) {
1331
+ const SearchBar = ({
1332
+ value,
1333
+ onChange,
1334
+ onSubmit,
1335
+ placeholder,
1336
+ autoFocus = false,
1337
+ className = '',
1338
+ variant = 'instant'
1339
+ }) => {
1340
+ const handleSubmit = event => {
1337
1341
  event.preventDefault();
1338
1342
  onSubmit();
1339
1343
  };
1340
- var handleKeyDown = function (event) {
1344
+ const handleKeyDown = event => {
1341
1345
  if (event.key === 'Enter') {
1342
1346
  event.preventDefault();
1343
1347
  onSubmit();
1344
1348
  }
1345
1349
  };
1346
- var handleClear = function () {
1350
+ const handleClear = () => {
1347
1351
  onChange('');
1348
1352
  };
1349
- var showClearButton = value.length > 0;
1353
+ const showClearButton = value.length > 0;
1350
1354
  return /*#__PURE__*/React.createElement("form", {
1351
1355
  onSubmit: handleSubmit,
1352
- className: "".concat(styles$d.searchBar, " ").concat(className)
1356
+ className: `${styles$d.searchBar} ${className}`
1353
1357
  }, /*#__PURE__*/React.createElement("div", {
1354
1358
  className: styles$d.inputWrapper
1355
1359
  }, /*#__PURE__*/React.createElement(SearchIcon, null), /*#__PURE__*/React.createElement(SearchInput, {
@@ -1372,22 +1376,21 @@ var SearchBar = function (_a) {
1372
1376
 
1373
1377
  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"};
1374
1378
 
1375
- var ContentCardHorizontal = function (_a) {
1376
- _a.id;
1377
- var title = _a.title,
1378
- url = _a.url,
1379
- category = _a.category,
1380
- meta = _a.meta,
1381
- excerpt = _a.excerpt,
1382
- _b = _a.className,
1383
- className = _b === void 0 ? "" : _b,
1384
- _c = _a.variant,
1385
- variant = _c === void 0 ? "instant-view" : _c;
1386
- var cardClasses = classNames(styles$c.contentCard, styles$c["contentCard--".concat(variant)], className);
1379
+ const ContentCardHorizontal = ({
1380
+ id,
1381
+ title,
1382
+ url,
1383
+ category,
1384
+ meta,
1385
+ excerpt,
1386
+ className = "",
1387
+ variant = "instant-view"
1388
+ }) => {
1389
+ const cardClasses = classNames(styles$c.contentCard, styles$c[`contentCard--${variant}`], className);
1387
1390
  return /*#__PURE__*/React.createElement("a", {
1388
1391
  href: url,
1389
1392
  className: cardClasses,
1390
- "aria-label": "View content: ".concat(title)
1393
+ "aria-label": `View content: ${title}`
1391
1394
  }, /*#__PURE__*/React.createElement("div", {
1392
1395
  className: styles$c.contentMeta
1393
1396
  }, category && /*#__PURE__*/React.createElement("span", {
@@ -1403,21 +1406,23 @@ var ContentCardHorizontal = function (_a) {
1403
1406
 
1404
1407
  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-"};
1405
1408
 
1406
- var FederatedInstantResultsLayout = function (_a) {
1407
- _a.query;
1408
- var products = _a.products,
1409
- contents = _a.contents,
1410
- isLoadingProducts = _a.isLoadingProducts,
1411
- isLoadingContents = _a.isLoadingContents,
1412
- productsError = _a.productsError,
1413
- contentsError = _a.contentsError,
1414
- onSeeAllProducts = _a.onSeeAllProducts,
1415
- onSeeAllContents = _a.onSeeAllContents;
1416
- _a.onSeeAllCombined;
1409
+ const FederatedInstantResultsLayout = ({
1410
+ query,
1411
+ products,
1412
+ contents,
1413
+ isLoadingProducts,
1414
+ isLoadingContents,
1415
+ productsError,
1416
+ contentsError,
1417
+ onSeeAllProducts,
1418
+ onSeeAllContents,
1419
+ onSeeAllCombined
1420
+ }) => {
1417
1421
  products.length + contents.length;
1422
+
1418
1423
  // Show first 3 results from each category
1419
- var displayProducts = products.slice(0, 3);
1420
- var displayContents = contents.slice(0, 3);
1424
+ const displayProducts = products.slice(0, 3);
1425
+ const displayContents = contents.slice(0, 3);
1421
1426
  return /*#__PURE__*/React.createElement("div", {
1422
1427
  className: styles$b.instantResultsLayout
1423
1428
  }, /*#__PURE__*/React.createElement("div", {
@@ -1455,13 +1460,11 @@ var FederatedInstantResultsLayout = function (_a) {
1455
1460
  className: styles$b.errorState
1456
1461
  }, /*#__PURE__*/React.createElement("p", null, productsError)) : displayProducts.length > 0 ? /*#__PURE__*/React.createElement("div", {
1457
1462
  className: styles$b.resultsList
1458
- }, displayProducts.map(function (product, index) {
1459
- return /*#__PURE__*/React.createElement(React.Fragment, {
1460
- key: product.id
1461
- }, /*#__PURE__*/React.createElement(ProductCardHorizontal, product), index < displayProducts.length - 1 && /*#__PURE__*/React.createElement("hr", {
1462
- className: styles$b.divider
1463
- }));
1464
- })) : null), /*#__PURE__*/React.createElement("div", {
1463
+ }, displayProducts.map((product, index) => /*#__PURE__*/React.createElement(React.Fragment, {
1464
+ key: product.id
1465
+ }, /*#__PURE__*/React.createElement(ProductCardHorizontal, product), index < displayProducts.length - 1 && /*#__PURE__*/React.createElement("hr", {
1466
+ className: styles$b.divider
1467
+ })))) : null), /*#__PURE__*/React.createElement("div", {
1465
1468
  className: styles$b.resultsColumn
1466
1469
  }, /*#__PURE__*/React.createElement("div", {
1467
1470
  className: styles$b.columnHeader
@@ -1494,42 +1497,39 @@ var FederatedInstantResultsLayout = function (_a) {
1494
1497
  className: styles$b.errorState
1495
1498
  }, /*#__PURE__*/React.createElement("p", null, contentsError)) : displayContents.length > 0 ? /*#__PURE__*/React.createElement("div", {
1496
1499
  className: styles$b.resultsList
1497
- }, displayContents.map(function (content, index) {
1498
- return /*#__PURE__*/React.createElement(React.Fragment, {
1499
- key: content.id
1500
- }, /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
1501
- variant: "instant-view"
1502
- })), index < displayContents.length - 1 && /*#__PURE__*/React.createElement("hr", {
1503
- className: styles$b.divider
1504
- }));
1505
- })) : null)));
1500
+ }, displayContents.map((content, index) => /*#__PURE__*/React.createElement(React.Fragment, {
1501
+ key: content.id
1502
+ }, /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
1503
+ variant: "instant-view"
1504
+ })), index < displayContents.length - 1 && /*#__PURE__*/React.createElement("hr", {
1505
+ className: styles$b.divider
1506
+ })))) : null)));
1506
1507
  };
1507
1508
 
1508
1509
  var styles$a = {"resultsCount":"ResultsCount-module__resultsCount___cNM6f"};
1509
1510
 
1510
- var ResultsCount = function (_a) {
1511
- var count = _a.count,
1512
- type = _a.type,
1513
- _b = _a.className,
1514
- className = _b === void 0 ? '' : _b;
1515
- var label = count === 1 ? type.slice(0, -1) : type;
1511
+ const ResultsCount = ({
1512
+ count,
1513
+ type,
1514
+ className = ''
1515
+ }) => {
1516
+ const label = count === 1 ? type.slice(0, -1) : type;
1516
1517
  return /*#__PURE__*/React.createElement("span", {
1517
- className: "".concat(styles$a.resultsCount, " ").concat(className)
1518
+ className: `${styles$a.resultsCount} ${className}`
1518
1519
  }, count, " ", label);
1519
1520
  };
1520
1521
 
1521
1522
  var styles$9 = {"seeAllButton":"SeeAllLinkButton-module__seeAllButton___eAQqJ"};
1522
1523
 
1523
- var SeeAllLinkButton = function (_a) {
1524
- var onClick = _a.onClick,
1525
- _b = _a.label,
1526
- label = _b === void 0 ? 'See all results' : _b,
1527
- _c = _a.className,
1528
- className = _c === void 0 ? '' : _c;
1524
+ const SeeAllLinkButton = ({
1525
+ onClick,
1526
+ label = 'See all results',
1527
+ className = ''
1528
+ }) => {
1529
1529
  return /*#__PURE__*/React.createElement("button", {
1530
1530
  type: "button",
1531
1531
  onClick: onClick,
1532
- className: "".concat(styles$9.seeAllButton, " ").concat(className)
1532
+ className: `${styles$9.seeAllButton} ${className}`
1533
1533
  }, label, /*#__PURE__*/React.createElement("svg", {
1534
1534
  xmlns: "http://www.w3.org/2000/svg",
1535
1535
  viewBox: "0 0 24 24",
@@ -1546,17 +1546,17 @@ var SeeAllLinkButton = function (_a) {
1546
1546
 
1547
1547
  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"};
1548
1548
 
1549
- var ResultsColumn = function (_a) {
1550
- var title = _a.title,
1551
- count = _a.count,
1552
- isLoading = _a.isLoading,
1553
- error = _a.error,
1554
- onSeeAll = _a.onSeeAll,
1555
- children = _a.children,
1556
- _b = _a.className,
1557
- className = _b === void 0 ? '' : _b;
1549
+ const ResultsColumn = ({
1550
+ title,
1551
+ count,
1552
+ isLoading,
1553
+ error,
1554
+ onSeeAll,
1555
+ children,
1556
+ className = ''
1557
+ }) => {
1558
1558
  return /*#__PURE__*/React.createElement("div", {
1559
- className: "".concat(styles$8.resultsColumn, " ").concat(className)
1559
+ className: `${styles$8.resultsColumn} ${className}`
1560
1560
  }, /*#__PURE__*/React.createElement("div", {
1561
1561
  className: styles$8.columnHeader
1562
1562
  }, /*#__PURE__*/React.createElement("h3", {
@@ -1579,7 +1579,7 @@ var ResultsColumn = function (_a) {
1579
1579
  className: styles$8.columnFooter
1580
1580
  }, /*#__PURE__*/React.createElement(SeeAllLinkButton, {
1581
1581
  onClick: onSeeAll,
1582
- label: "See all ".concat(title.toLowerCase())
1582
+ label: `See all ${title.toLowerCase()}`
1583
1583
  }))));
1584
1584
  };
1585
1585
 
@@ -1601,23 +1601,23 @@ const faXmark = {
1601
1601
  icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.6 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z"]
1602
1602
  };
1603
1603
 
1604
- /**
1605
- * FilterSearch - Search input for filtering facet values
1604
+ /**
1605
+ * FilterSearch - Search input for filtering facet values
1606
1606
  */
1607
- var FilterSearch = function (_a) {
1608
- var value = _a.value,
1609
- onChange = _a.onChange,
1610
- _b = _a.placeholder,
1611
- placeholder = _b === void 0 ? "Search" : _b,
1612
- className = _a.className;
1613
- var handleChange = function (e) {
1607
+ const FilterSearch = ({
1608
+ value,
1609
+ onChange,
1610
+ placeholder = "Search",
1611
+ className
1612
+ }) => {
1613
+ const handleChange = e => {
1614
1614
  onChange(e.target.value);
1615
1615
  };
1616
- var handleClear = function () {
1616
+ const handleClear = () => {
1617
1617
  onChange("");
1618
1618
  };
1619
1619
  return /*#__PURE__*/React.createElement("div", {
1620
- className: "".concat(styles$7.filterSearch, " ").concat(className || "")
1620
+ className: `${styles$7.filterSearch} ${className || ""}`
1621
1621
  }, !value && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
1622
1622
  icon: faMagnifyingGlass,
1623
1623
  className: styles$7.searchIcon,
@@ -1639,43 +1639,42 @@ var FilterSearch = function (_a) {
1639
1639
  })));
1640
1640
  };
1641
1641
 
1642
- var CheckIcon = function () {
1643
- return /*#__PURE__*/React.createElement("svg", {
1644
- xmlns: "http://www.w3.org/2000/svg",
1645
- width: "9",
1646
- height: "7",
1647
- viewBox: "0 0 9 7",
1648
- fill: "none"
1649
- }, /*#__PURE__*/React.createElement("path", {
1650
- 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",
1651
- fill: "#E2001A"
1652
- }));
1653
- };
1654
- /**
1655
- * FilterItem - Individual facet item with checkbox and count
1642
+ const CheckIcon = () => /*#__PURE__*/React.createElement("svg", {
1643
+ xmlns: "http://www.w3.org/2000/svg",
1644
+ width: "9",
1645
+ height: "7",
1646
+ viewBox: "0 0 9 7",
1647
+ fill: "none"
1648
+ }, /*#__PURE__*/React.createElement("path", {
1649
+ 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",
1650
+ fill: "#E2001A"
1651
+ }));
1652
+
1653
+ /**
1654
+ * FilterItem - Individual facet item with checkbox and count
1656
1655
  */
1657
- var FilterItem = function (_a) {
1658
- var value = _a.value,
1659
- onToggle = _a.onToggle,
1660
- className = _a.className,
1661
- _b = _a.variant,
1662
- variant = _b === void 0 ? 'desktop' : _b,
1663
- _c = _a.showCheckbox,
1664
- showCheckbox = _c === void 0 ? true : _c;
1665
- var handleChange = function () {
1656
+ const FilterItem = ({
1657
+ value,
1658
+ onToggle,
1659
+ className,
1660
+ variant = 'desktop',
1661
+ showCheckbox = true
1662
+ }) => {
1663
+ const handleChange = () => {
1666
1664
  onToggle(value.value);
1667
1665
  };
1668
- var handleKeyDown = function (e) {
1666
+ const handleKeyDown = e => {
1669
1667
  if (e.key === "Enter" || e.key === " ") {
1670
1668
  e.preventDefault();
1671
1669
  onToggle(value.value);
1672
1670
  }
1673
1671
  };
1672
+
1674
1673
  // Mobile variant: Plain button (no checkbox)
1675
1674
  if (variant === 'mobile') {
1676
1675
  return /*#__PURE__*/React.createElement("button", {
1677
1676
  type: "button",
1678
- className: "".concat(styles$7.filterItemMobile, " ").concat(value.isRefined ? styles$7.filterItemMobileRefined : '', " ").concat(className || ""),
1677
+ className: `${styles$7.filterItemMobile} ${value.isRefined ? styles$7.filterItemMobileRefined : ''} ${className || ""}`,
1679
1678
  onClick: handleChange,
1680
1679
  onKeyDown: handleKeyDown,
1681
1680
  "aria-pressed": value.isRefined
@@ -1685,11 +1684,12 @@ var FilterItem = function (_a) {
1685
1684
  className: styles$7.filterCount
1686
1685
  }, "(", value.count, ")"));
1687
1686
  }
1687
+
1688
1688
  // Desktop without checkbox (Content tab): Plain button with red text when selected
1689
1689
  if (!showCheckbox) {
1690
1690
  return /*#__PURE__*/React.createElement("button", {
1691
1691
  type: "button",
1692
- className: "".concat(styles$7.filterItemDesktopNoCheckbox, " ").concat(value.isRefined ? styles$7.filterItemDesktopRefined : '', " ").concat(className || ""),
1692
+ className: `${styles$7.filterItemDesktopNoCheckbox} ${value.isRefined ? styles$7.filterItemDesktopRefined : ''} ${className || ""}`,
1693
1693
  onClick: handleChange,
1694
1694
  onKeyDown: handleKeyDown,
1695
1695
  "aria-pressed": value.isRefined
@@ -1699,16 +1699,17 @@ var FilterItem = function (_a) {
1699
1699
  className: styles$7.filterCount
1700
1700
  }, "(", value.count, ")"));
1701
1701
  }
1702
+
1702
1703
  // Desktop with checkbox (Products tab): Multi-select checkboxes
1703
1704
  return /*#__PURE__*/React.createElement("label", {
1704
- className: "".concat(styles$7.filterItem, " ").concat(className || ""),
1705
+ className: `${styles$7.filterItem} ${className || ""}`,
1705
1706
  onKeyDown: handleKeyDown
1706
1707
  }, /*#__PURE__*/React.createElement("input", {
1707
1708
  type: "checkbox",
1708
1709
  checked: value.isRefined,
1709
1710
  onChange: handleChange,
1710
1711
  className: styles$7.filterCheckboxInput,
1711
- "aria-label": "".concat(value.value, " (").concat(value.count, " results)")
1712
+ "aria-label": `${value.value} (${value.count} results)`
1712
1713
  }), /*#__PURE__*/React.createElement("div", {
1713
1714
  className: styles$7.filterCheckbox
1714
1715
  }, value.isRefined && /*#__PURE__*/React.createElement(CheckIcon, null)), /*#__PURE__*/React.createElement("span", {
@@ -1718,61 +1719,57 @@ var FilterItem = function (_a) {
1718
1719
  }, "(", value.count, ")"));
1719
1720
  };
1720
1721
 
1721
- /**
1722
- * FilterAccordion - Collapsible facet section with optional search
1722
+ /**
1723
+ * FilterAccordion - Collapsible facet section with optional search
1723
1724
  */
1724
- var FilterAccordion = function (_a) {
1725
- var facet = _a.facet,
1726
- isExpanded = _a.isExpanded,
1727
- onToggle = _a.onToggle,
1728
- onValueToggle = _a.onValueToggle,
1729
- className = _a.className,
1730
- _b = _a.variant,
1731
- variant = _b === void 0 ? 'desktop' : _b,
1732
- _c = _a.showCheckbox,
1733
- showCheckbox = _c === void 0 ? true : _c;
1734
- var _d = useState(""),
1735
- searchQuery = _d[0],
1736
- setSearchQuery = _d[1];
1725
+ const FilterAccordion = ({
1726
+ facet,
1727
+ isExpanded,
1728
+ onToggle,
1729
+ onValueToggle,
1730
+ className,
1731
+ variant = 'desktop',
1732
+ showCheckbox = true
1733
+ }) => {
1734
+ const [searchQuery, setSearchQuery] = useState("");
1735
+
1737
1736
  // Filter facet values based on search query
1738
- var filteredValues = useMemo(function () {
1737
+ const filteredValues = useMemo(() => {
1739
1738
  if (!searchQuery.trim()) {
1740
1739
  return facet.values;
1741
1740
  }
1742
- var query = searchQuery.toLowerCase();
1743
- return facet.values.filter(function (value) {
1744
- return value.value.toLowerCase().includes(query);
1745
- });
1741
+ const query = searchQuery.toLowerCase();
1742
+ return facet.values.filter(value => value.value.toLowerCase().includes(query));
1746
1743
  }, [facet.values, searchQuery]);
1747
- var handleToggle = function () {
1744
+ const handleToggle = () => {
1748
1745
  onToggle();
1749
1746
  // Clear search when collapsing
1750
1747
  if (isExpanded) {
1751
1748
  setSearchQuery("");
1752
1749
  }
1753
1750
  };
1754
- var handleKeyDown = function (e) {
1751
+ const handleKeyDown = e => {
1755
1752
  if (e.key === "Enter" || e.key === " ") {
1756
1753
  e.preventDefault();
1757
1754
  handleToggle();
1758
1755
  }
1759
1756
  };
1760
- var handleValueToggle = function (value) {
1757
+ const handleValueToggle = value => {
1761
1758
  onValueToggle(facet.attribute, value);
1762
1759
  };
1763
1760
  return /*#__PURE__*/React.createElement("div", {
1764
- className: "".concat(styles$7.filterAccordion, " ").concat(className || "")
1761
+ className: `${styles$7.filterAccordion} ${className || ""}`
1765
1762
  }, /*#__PURE__*/React.createElement("button", {
1766
1763
  type: "button",
1767
- className: "".concat(styles$7.accordionHeader, " ").concat(isExpanded ? styles$7.accordionHeaderExpanded : ""),
1764
+ className: `${styles$7.accordionHeader} ${isExpanded ? styles$7.accordionHeaderExpanded : ""}`,
1768
1765
  onClick: handleToggle,
1769
1766
  onKeyDown: handleKeyDown,
1770
1767
  "aria-expanded": isExpanded,
1771
- "aria-controls": "accordion-".concat(facet.id)
1768
+ "aria-controls": `accordion-${facet.id}`
1772
1769
  }, /*#__PURE__*/React.createElement("span", {
1773
1770
  className: styles$7.accordionTitle
1774
1771
  }, facet.label), /*#__PURE__*/React.createElement("svg", {
1775
- className: "".concat(styles$7.accordionIcon, " ").concat(isExpanded ? styles$7.accordionIconExpanded : ""),
1772
+ className: `${styles$7.accordionIcon} ${isExpanded ? styles$7.accordionIconExpanded : ""}`,
1776
1773
  width: "16",
1777
1774
  height: "16",
1778
1775
  viewBox: "0 0 16 16",
@@ -1786,7 +1783,7 @@ var FilterAccordion = function (_a) {
1786
1783
  strokeLinecap: "round",
1787
1784
  strokeLinejoin: "round"
1788
1785
  }))), isExpanded && /*#__PURE__*/React.createElement("div", {
1789
- id: "accordion-".concat(facet.id),
1786
+ id: `accordion-${facet.id}`,
1790
1787
  className: styles$7.accordionContent
1791
1788
  }, variant === 'desktop' && facet.searchable && facet.values.length > 5 && /*#__PURE__*/React.createElement("div", {
1792
1789
  className: styles$7.accordionSearch
@@ -1796,39 +1793,38 @@ var FilterAccordion = function (_a) {
1796
1793
  placeholder: "Search"
1797
1794
  })), /*#__PURE__*/React.createElement("div", {
1798
1795
  className: styles$7.filterList
1799
- }, filteredValues.length > 0 ? filteredValues.map(function (value) {
1800
- return /*#__PURE__*/React.createElement(FilterItem, {
1801
- key: value.value,
1802
- value: value,
1803
- onToggle: handleValueToggle,
1804
- variant: variant,
1805
- showCheckbox: showCheckbox
1806
- });
1807
- }) : /*#__PURE__*/React.createElement("div", {
1796
+ }, filteredValues.length > 0 ? filteredValues.map(value => /*#__PURE__*/React.createElement(FilterItem, {
1797
+ key: value.value,
1798
+ value: value,
1799
+ onToggle: handleValueToggle,
1800
+ variant: variant,
1801
+ showCheckbox: showCheckbox
1802
+ })) : /*#__PURE__*/React.createElement("div", {
1808
1803
  className: styles$7.noResults
1809
1804
  }, "No results found"))));
1810
1805
  };
1811
1806
 
1812
- /**
1813
- * AppliedFilterTag - Individual removable filter tag/chip
1807
+ /**
1808
+ * AppliedFilterTag - Individual removable filter tag/chip
1814
1809
  */
1815
- var AppliedFilterTag = function (_a) {
1816
- var attribute = _a.attribute,
1817
- value = _a.value,
1818
- label = _a.label,
1819
- onRemove = _a.onRemove,
1820
- className = _a.className;
1821
- var handleRemove = function () {
1810
+ const AppliedFilterTag = ({
1811
+ attribute,
1812
+ value,
1813
+ label,
1814
+ onRemove,
1815
+ className
1816
+ }) => {
1817
+ const handleRemove = () => {
1822
1818
  onRemove(attribute, value);
1823
1819
  };
1824
- var handleKeyDown = function (e) {
1820
+ const handleKeyDown = e => {
1825
1821
  if (e.key === "Enter" || e.key === " ") {
1826
1822
  e.preventDefault();
1827
1823
  handleRemove();
1828
1824
  }
1829
1825
  };
1830
1826
  return /*#__PURE__*/React.createElement("div", {
1831
- className: "".concat(styles$7.appliedFilterTag, " ").concat(className || "")
1827
+ className: `${styles$7.appliedFilterTag} ${className || ""}`
1832
1828
  }, /*#__PURE__*/React.createElement("span", {
1833
1829
  className: styles$7.tagLabel
1834
1830
  }, label || value), /*#__PURE__*/React.createElement("button", {
@@ -1836,7 +1832,7 @@ var AppliedFilterTag = function (_a) {
1836
1832
  onClick: handleRemove,
1837
1833
  onKeyDown: handleKeyDown,
1838
1834
  className: styles$7.tagRemoveButton,
1839
- "aria-label": "Remove ".concat(label || value, " filter")
1835
+ "aria-label": `Remove ${label || value} filter`
1840
1836
  }, /*#__PURE__*/React.createElement("svg", {
1841
1837
  width: "10",
1842
1838
  height: "10",
@@ -1853,19 +1849,20 @@ var AppliedFilterTag = function (_a) {
1853
1849
  }))));
1854
1850
  };
1855
1851
 
1856
- /**
1857
- * AppliedFilters - Shows all active filters as removable tags
1852
+ /**
1853
+ * AppliedFilters - Shows all active filters as removable tags
1858
1854
  */
1859
- var AppliedFilters = function (_a) {
1860
- var facets = _a.facets,
1861
- onRemove = _a.onRemove;
1862
- _a.onClearAll;
1863
- var className = _a.className;
1855
+ const AppliedFilters = ({
1856
+ facets,
1857
+ onRemove,
1858
+ onClearAll,
1859
+ className
1860
+ }) => {
1864
1861
  // Extract all refined (selected) filters
1865
- var appliedFilters = useMemo(function () {
1866
- var filters = [];
1867
- facets.forEach(function (facet) {
1868
- facet.values.forEach(function (value) {
1862
+ const appliedFilters = useMemo(() => {
1863
+ const filters = [];
1864
+ facets.forEach(facet => {
1865
+ facet.values.forEach(value => {
1869
1866
  if (value.isRefined) {
1870
1867
  filters.push({
1871
1868
  attribute: facet.attribute,
@@ -1878,72 +1875,66 @@ var AppliedFilters = function (_a) {
1878
1875
  });
1879
1876
  return filters;
1880
1877
  }, [facets]);
1878
+
1881
1879
  // Don't render if no filters are applied
1882
1880
  if (appliedFilters.length === 0) {
1883
1881
  return null;
1884
1882
  }
1885
1883
  return /*#__PURE__*/React.createElement("div", {
1886
- className: "".concat(styles$7.appliedFilters, " ").concat(className || "")
1884
+ className: `${styles$7.appliedFilters} ${className || ""}`
1887
1885
  }, /*#__PURE__*/React.createElement("h4", {
1888
1886
  className: styles$7.appliedFiltersTitle
1889
1887
  }, "Applied filters"), /*#__PURE__*/React.createElement("div", {
1890
1888
  className: styles$7.appliedFiltersList
1891
- }, appliedFilters.map(function (filter) {
1892
- return /*#__PURE__*/React.createElement(AppliedFilterTag, {
1893
- key: "".concat(filter.attribute, "-").concat(filter.value),
1894
- attribute: filter.attribute,
1895
- value: filter.value,
1896
- label: filter.label,
1897
- onRemove: onRemove
1898
- });
1899
- })));
1889
+ }, appliedFilters.map(filter => /*#__PURE__*/React.createElement(AppliedFilterTag, {
1890
+ key: `${filter.attribute}-${filter.value}`,
1891
+ attribute: filter.attribute,
1892
+ value: filter.value,
1893
+ label: filter.label,
1894
+ onRemove: onRemove
1895
+ }))));
1900
1896
  };
1901
1897
 
1902
- /**
1903
- * FiltersPanel - Main container for all filters
1904
- *
1905
- * Fully controlled component - renders based on facets prop.
1906
- * When facets change (e.g., after API refetch), component re-renders with new data.
1907
- * Accordion expansion state persists across refetches, with new facets respecting defaultExpanded.
1898
+ /**
1899
+ * FiltersPanel - Main container for all filters
1900
+ *
1901
+ * Fully controlled component - renders based on facets prop.
1902
+ * When facets change (e.g., after API refetch), component re-renders with new data.
1903
+ * Accordion expansion state persists across refetches, with new facets respecting defaultExpanded.
1908
1904
  */
1909
- var FiltersPanel = function (_a) {
1910
- var facets = _a.facets,
1911
- onFacetToggle = _a.onFacetToggle,
1912
- _b = _a.isLoading,
1913
- isLoading = _b === void 0 ? false : _b,
1914
- className = _a.className,
1915
- _c = _a.variant,
1916
- variant = _c === void 0 ? 'desktop' : _c,
1917
- _d = _a.showCheckbox,
1918
- showCheckbox = _d === void 0 ? true : _d;
1905
+ const FiltersPanel = ({
1906
+ facets,
1907
+ onFacetToggle,
1908
+ isLoading = false,
1909
+ className,
1910
+ variant = 'desktop',
1911
+ showCheckbox = true
1912
+ }) => {
1919
1913
  // Track which accordions are expanded (transient UI state)
1920
- var _e = useState(function () {
1921
- // Initialize with default expanded facets
1922
- var expanded = new Set();
1923
- facets.forEach(function (facet) {
1924
- if (facet.defaultExpanded) {
1925
- expanded.add(facet.id);
1926
- }
1927
- });
1928
- return expanded;
1929
- }),
1930
- expandedAccordions = _e[0],
1931
- setExpandedAccordions = _e[1];
1914
+ const [expandedAccordions, setExpandedAccordions] = useState(() => {
1915
+ // Initialize with default expanded facets
1916
+ const expanded = new Set();
1917
+ facets.forEach(facet => {
1918
+ if (facet.defaultExpanded) {
1919
+ expanded.add(facet.id);
1920
+ }
1921
+ });
1922
+ return expanded;
1923
+ });
1924
+
1932
1925
  // Sync expansion state when facets change (e.g., new facets appear after refetch)
1933
- useEffect(function () {
1934
- setExpandedAccordions(function (prev) {
1935
- var next = new Set(prev);
1926
+ useEffect(() => {
1927
+ setExpandedAccordions(prev => {
1928
+ const next = new Set(prev);
1936
1929
  // Add new facets with defaultExpanded
1937
- facets.forEach(function (facet) {
1930
+ facets.forEach(facet => {
1938
1931
  if (facet.defaultExpanded && !next.has(facet.id)) {
1939
1932
  next.add(facet.id);
1940
1933
  }
1941
1934
  });
1942
1935
  // Remove facets that no longer exist
1943
- var currentFacetIds = new Set(facets.map(function (f) {
1944
- return f.id;
1945
- }));
1946
- next.forEach(function (id) {
1936
+ const currentFacetIds = new Set(facets.map(f => f.id));
1937
+ next.forEach(id => {
1947
1938
  if (!currentFacetIds.has(id)) {
1948
1939
  next.delete(id);
1949
1940
  }
@@ -1951,9 +1942,9 @@ var FiltersPanel = function (_a) {
1951
1942
  return next;
1952
1943
  });
1953
1944
  }, [facets]);
1954
- var handleAccordionToggle = useCallback(function (facetId) {
1955
- setExpandedAccordions(function (prev) {
1956
- var next = new Set(prev);
1945
+ const handleAccordionToggle = useCallback(facetId => {
1946
+ setExpandedAccordions(prev => {
1947
+ const next = new Set(prev);
1957
1948
  if (next.has(facetId)) {
1958
1949
  next.delete(facetId);
1959
1950
  } else {
@@ -1962,16 +1953,16 @@ var FiltersPanel = function (_a) {
1962
1953
  return next;
1963
1954
  });
1964
1955
  }, []);
1965
- var handleValueToggle = useCallback(function (attribute, value) {
1956
+ const handleValueToggle = useCallback((attribute, value) => {
1966
1957
  onFacetToggle(attribute, value);
1967
1958
  }, [onFacetToggle]);
1968
- var handleRemoveFilter = useCallback(function (attribute, value) {
1959
+ const handleRemoveFilter = useCallback((attribute, value) => {
1969
1960
  onFacetToggle(attribute, value);
1970
1961
  }, [onFacetToggle]);
1971
- var handleClearAll = useCallback(function () {
1962
+ const handleClearAll = useCallback(() => {
1972
1963
  // Remove all refined facets
1973
- facets.forEach(function (facet) {
1974
- facet.values.forEach(function (value) {
1964
+ facets.forEach(facet => {
1965
+ facet.values.forEach(value => {
1975
1966
  if (value.isRefined) {
1976
1967
  onFacetToggle(facet.attribute, value.value);
1977
1968
  }
@@ -1980,7 +1971,7 @@ var FiltersPanel = function (_a) {
1980
1971
  }, [facets, onFacetToggle]);
1981
1972
  if (isLoading) {
1982
1973
  return /*#__PURE__*/React.createElement("div", {
1983
- className: "".concat(styles$7.filtersPanel, " ").concat(className || "")
1974
+ className: `${styles$7.filtersPanel} ${className || ""}`
1984
1975
  }, /*#__PURE__*/React.createElement("div", {
1985
1976
  className: styles$7.loadingState
1986
1977
  }, /*#__PURE__*/React.createElement("div", {
@@ -1991,73 +1982,70 @@ var FiltersPanel = function (_a) {
1991
1982
  return null;
1992
1983
  }
1993
1984
  return /*#__PURE__*/React.createElement("div", {
1994
- className: "".concat(styles$7.filtersPanel, " ").concat(className || "")
1985
+ className: `${styles$7.filtersPanel} ${className || ""}`
1995
1986
  }, showCheckbox && /*#__PURE__*/React.createElement(AppliedFilters, {
1996
1987
  facets: facets,
1997
1988
  onRemove: handleRemoveFilter,
1998
1989
  onClearAll: handleClearAll
1999
1990
  }), /*#__PURE__*/React.createElement("div", {
2000
1991
  className: styles$7.filtersList
2001
- }, facets.map(function (facet) {
2002
- return /*#__PURE__*/React.createElement(FilterAccordion, {
2003
- key: facet.id,
2004
- facet: facet,
2005
- isExpanded: expandedAccordions.has(facet.id),
2006
- onToggle: function () {
2007
- return handleAccordionToggle(facet.id);
2008
- },
2009
- onValueToggle: handleValueToggle,
2010
- variant: variant,
2011
- showCheckbox: showCheckbox
2012
- });
2013
- })));
1992
+ }, facets.map(facet => /*#__PURE__*/React.createElement(FilterAccordion, {
1993
+ key: facet.id,
1994
+ facet: facet,
1995
+ isExpanded: expandedAccordions.has(facet.id),
1996
+ onToggle: () => handleAccordionToggle(facet.id),
1997
+ onValueToggle: handleValueToggle,
1998
+ variant: variant,
1999
+ showCheckbox: showCheckbox
2000
+ }))));
2014
2001
  };
2015
2002
 
2016
2003
  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"};
2017
2004
 
2018
- /**
2019
- * ProductCardVertical - Vertical product card for grid layouts
2020
- *
2021
- * Used in full results view with 4-column grid (desktop) or 2-column grid (mobile).
2022
- * Figma spec: Default (no shadow) → Hover (shadow + grey button) → Focus (border + shadow)
2023
- *
2024
- * @example
2025
- * ```tsx
2026
- * <ProductCardVertical
2027
- * title="TURBOVAC i - High vacuum turbopump"
2028
- * url="/products/turbovac-i"
2029
- * imageUrl="/assets/search-product.png"
2030
- * productId="21312VISH"
2031
- * description="Premium high-performance turbomolecular pump"
2032
- * buttonLabel="BUY ONLINE"
2033
- * />
2034
- * ```
2005
+ /**
2006
+ * ProductCardVertical - Vertical product card for grid layouts
2007
+ *
2008
+ * Used in full results view with 4-column grid (desktop) or 2-column grid (mobile).
2009
+ * Figma spec: Default (no shadow) → Hover (shadow + grey button) → Focus (border + shadow)
2010
+ *
2011
+ * @example
2012
+ * ```tsx
2013
+ * <ProductCardVertical
2014
+ * title="TURBOVAC i - High vacuum turbopump"
2015
+ * url="/products/turbovac-i"
2016
+ * imageUrl="/assets/search-product.png"
2017
+ * productId="21312VISH"
2018
+ * description="Premium high-performance turbomolecular pump"
2019
+ * buttonLabel="BUY ONLINE"
2020
+ * />
2021
+ * ```
2035
2022
  */
2036
- var ProductCardVertical = function (_a) {
2037
- var _b;
2038
- var id = _a.id,
2039
- title = _a.title,
2040
- url = _a.url,
2041
- imageUrl = _a.imageUrl;
2042
- _a.productId;
2043
- var description = _a.description,
2044
- _c = _a.buttonLabel,
2045
- buttonLabel = _c === void 0 ? 'BUY ONLINE' : _c,
2046
- onButtonClick = _a.onButtonClick,
2047
- className = _a.className,
2048
- _d = _a.variant,
2049
- variant = _d === void 0 ? 'desktop' : _d,
2050
- forceState = _a["data-force-state"];
2051
- var handleButtonClick = function (e) {
2023
+ const ProductCardVertical = ({
2024
+ id,
2025
+ title,
2026
+ url,
2027
+ imageUrl,
2028
+ productId,
2029
+ description,
2030
+ buttonLabel = 'BUY ONLINE',
2031
+ onButtonClick,
2032
+ className,
2033
+ variant = 'desktop',
2034
+ 'data-force-state': forceState
2035
+ }) => {
2036
+ const handleButtonClick = e => {
2052
2037
  e.preventDefault(); // Prevent card link navigation
2053
2038
  e.stopPropagation(); // Stop event bubbling
2054
- onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick();
2039
+ onButtonClick?.();
2055
2040
  };
2056
- 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);
2041
+ const cardClasses = classNames(styles$6.productCardVertical, styles$6[`productCardVertical--${variant}`], {
2042
+ [styles$6['productCardVertical--hover']]: forceState === 'hover',
2043
+ [styles$6['productCardVertical--focus']]: forceState === 'focus'
2044
+ }, className);
2057
2045
  return /*#__PURE__*/React.createElement("a", {
2058
2046
  href: url,
2059
2047
  className: cardClasses,
2060
- "aria-label": "View product: ".concat(title),
2048
+ "aria-label": `View product: ${title}`,
2061
2049
  "data-product-id": id
2062
2050
  }, imageUrl && /*#__PURE__*/React.createElement("div", {
2063
2051
  className: styles$6.productCardVertical__imageWrapper
@@ -2078,7 +2066,7 @@ var ProductCardVertical = function (_a) {
2078
2066
  type: "button",
2079
2067
  onClick: handleButtonClick,
2080
2068
  className: styles$6.productCardVertical__button,
2081
- "aria-label": "".concat(buttonLabel, " - ").concat(title),
2069
+ "aria-label": `${buttonLabel} - ${title}`,
2082
2070
  tabIndex: -1
2083
2071
  }, /*#__PURE__*/React.createElement("span", null, buttonLabel), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
2084
2072
  icon: faArrowUpRightFromSquare$1,
@@ -2088,19 +2076,17 @@ var ProductCardVertical = function (_a) {
2088
2076
 
2089
2077
  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"};
2090
2078
 
2091
- var ResultsList = function (_a) {
2092
- var type = _a.type,
2093
- _b = _a.products,
2094
- products = _b === void 0 ? [] : _b,
2095
- _c = _a.contents,
2096
- contents = _c === void 0 ? [] : _c,
2097
- isLoading = _a.isLoading,
2098
- error = _a.error,
2099
- _d = _a.className,
2100
- className = _d === void 0 ? '' : _d;
2079
+ const ResultsList = ({
2080
+ type,
2081
+ products = [],
2082
+ contents = [],
2083
+ isLoading,
2084
+ error,
2085
+ className = ''
2086
+ }) => {
2101
2087
  if (isLoading) {
2102
2088
  return /*#__PURE__*/React.createElement("div", {
2103
- className: "".concat(styles$5.loadingState, " ").concat(className)
2089
+ className: `${styles$5.loadingState} ${className}`
2104
2090
  }, /*#__PURE__*/React.createElement("div", {
2105
2091
  className: styles$5.spinner,
2106
2092
  "aria-label": "Loading..."
@@ -2108,15 +2094,15 @@ var ResultsList = function (_a) {
2108
2094
  }
2109
2095
  if (error) {
2110
2096
  return /*#__PURE__*/React.createElement("div", {
2111
- className: "".concat(styles$5.errorState, " ").concat(className)
2097
+ className: `${styles$5.errorState} ${className}`
2112
2098
  }, /*#__PURE__*/React.createElement("p", null, error));
2113
2099
  }
2114
- var hasProducts = products.length > 0;
2115
- var hasContents = contents.length > 0;
2116
- var hasResults = hasProducts || hasContents;
2100
+ const hasProducts = products.length > 0;
2101
+ const hasContents = contents.length > 0;
2102
+ const hasResults = hasProducts || hasContents;
2117
2103
  if (!hasResults) {
2118
2104
  return /*#__PURE__*/React.createElement("div", {
2119
- className: "".concat(styles$5.emptyState, " ").concat(className)
2105
+ className: `${styles$5.emptyState} ${className}`
2120
2106
  }, /*#__PURE__*/React.createElement("svg", {
2121
2107
  xmlns: "http://www.w3.org/2000/svg",
2122
2108
  viewBox: "0 0 24 24",
@@ -2134,111 +2120,107 @@ var ResultsList = function (_a) {
2134
2120
  d: "m21 21-4.35-4.35"
2135
2121
  })), /*#__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."));
2136
2122
  }
2123
+
2137
2124
  // Render based on type
2138
2125
  if (type === 'products') {
2139
2126
  return /*#__PURE__*/React.createElement("div", {
2140
- className: "".concat(styles$5.productsGrid, " ").concat(className)
2141
- }, products.map(function (product) {
2142
- return /*#__PURE__*/React.createElement(ProductCardVertical, _extends({
2143
- key: product.id
2144
- }, product, {
2145
- buttonLabel: "BUY ONLINE"
2146
- }));
2147
- }));
2127
+ className: `${styles$5.productsGrid} ${className}`
2128
+ }, products.map(product => /*#__PURE__*/React.createElement(ProductCardVertical, _extends({
2129
+ key: product.id
2130
+ }, product, {
2131
+ buttonLabel: "BUY ONLINE"
2132
+ }))));
2148
2133
  }
2149
2134
  if (type === 'content') {
2150
2135
  return /*#__PURE__*/React.createElement("div", {
2151
- className: "".concat(styles$5.contentsList, " ").concat(className)
2152
- }, contents.map(function (content, index) {
2153
- return /*#__PURE__*/React.createElement(React.Fragment, {
2154
- key: content.id
2155
- }, index > 0 && /*#__PURE__*/React.createElement("hr", {
2156
- className: styles$5.contentDivider
2157
- }), /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
2158
- variant: "results-view"
2159
- })));
2160
- }));
2136
+ className: `${styles$5.contentsList} ${className}`
2137
+ }, contents.map((content, index) => /*#__PURE__*/React.createElement(React.Fragment, {
2138
+ key: content.id
2139
+ }, index > 0 && /*#__PURE__*/React.createElement("hr", {
2140
+ className: styles$5.contentDivider
2141
+ }), /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
2142
+ variant: "results-view"
2143
+ })))));
2161
2144
  }
2145
+
2162
2146
  // type === 'all' - Show mixed results (not in current Figma design, but keep for compatibility)
2163
2147
  return /*#__PURE__*/React.createElement("div", {
2164
- className: "".concat(styles$5.resultsList, " ").concat(className)
2148
+ className: `${styles$5.resultsList} ${className}`
2165
2149
  }, hasProducts && /*#__PURE__*/React.createElement("div", {
2166
2150
  className: styles$5.resultsSection
2167
2151
  }, /*#__PURE__*/React.createElement("h3", {
2168
2152
  className: styles$5.sectionTitle
2169
2153
  }, "Products (", products.length, ")"), /*#__PURE__*/React.createElement("div", {
2170
2154
  className: styles$5.productsGrid
2171
- }, products.map(function (product) {
2172
- return /*#__PURE__*/React.createElement(ProductCardVertical, _extends({
2173
- key: product.id
2174
- }, product, {
2175
- buttonLabel: "BUY ONLINE"
2176
- }));
2177
- }))), hasContents && /*#__PURE__*/React.createElement("div", {
2155
+ }, products.map(product => /*#__PURE__*/React.createElement(ProductCardVertical, _extends({
2156
+ key: product.id
2157
+ }, product, {
2158
+ buttonLabel: "BUY ONLINE"
2159
+ }))))), hasContents && /*#__PURE__*/React.createElement("div", {
2178
2160
  className: styles$5.resultsSection
2179
2161
  }, /*#__PURE__*/React.createElement("h3", {
2180
2162
  className: styles$5.sectionTitle
2181
2163
  }, "Content (", contents.length, ")"), /*#__PURE__*/React.createElement("div", {
2182
2164
  className: styles$5.contentsList
2183
- }, contents.map(function (content, index) {
2184
- return /*#__PURE__*/React.createElement(React.Fragment, {
2185
- key: content.id
2186
- }, index > 0 && /*#__PURE__*/React.createElement("hr", {
2187
- className: styles$5.contentDivider
2188
- }), /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
2189
- variant: "results-view"
2190
- })));
2191
- }))));
2165
+ }, contents.map((content, index) => /*#__PURE__*/React.createElement(React.Fragment, {
2166
+ key: content.id
2167
+ }, index > 0 && /*#__PURE__*/React.createElement("hr", {
2168
+ className: styles$5.contentDivider
2169
+ }), /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
2170
+ variant: "results-view"
2171
+ })))))));
2192
2172
  };
2193
2173
 
2194
2174
  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"};
2195
2175
 
2196
- /**
2197
- * TabButton - Tab navigation component with result counts
2198
- *
2199
- * Supports two layout variants:
2200
- * - Desktop: Background colours, top red underline when active, rounded corners
2201
- * - Mobile: Text-only with bottom border underline when active
2202
- *
2203
- * @example
2204
- * ```tsx
2205
- * // Desktop variant
2206
- * <TabButton
2207
- * label="WEB SHOP RESULTS"
2208
- * count={542}
2209
- * isActive={true}
2210
- * onClick={() => setActiveTab('products')}
2211
- * variant="desktop"
2212
- * />
2213
- *
2214
- * // Mobile variant
2215
- * <TabButton
2216
- * label="WEB SHOP"
2217
- * isActive={false}
2218
- * onClick={() => setActiveTab('content')}
2219
- * variant="mobile"
2220
- * />
2221
- * ```
2176
+ /**
2177
+ * TabButton - Tab navigation component with result counts
2178
+ *
2179
+ * Supports two layout variants:
2180
+ * - Desktop: Background colours, top red underline when active, rounded corners
2181
+ * - Mobile: Text-only with bottom border underline when active
2182
+ *
2183
+ * @example
2184
+ * ```tsx
2185
+ * // Desktop variant
2186
+ * <TabButton
2187
+ * label="WEB SHOP RESULTS"
2188
+ * count={542}
2189
+ * isActive={true}
2190
+ * onClick={() => setActiveTab('products')}
2191
+ * variant="desktop"
2192
+ * />
2193
+ *
2194
+ * // Mobile variant
2195
+ * <TabButton
2196
+ * label="WEB SHOP"
2197
+ * isActive={false}
2198
+ * onClick={() => setActiveTab('content')}
2199
+ * variant="mobile"
2200
+ * />
2201
+ * ```
2222
2202
  */
2223
- var TabButton = function (_a) {
2224
- var _b;
2225
- var label = _a.label,
2226
- count = _a.count,
2227
- isActive = _a.isActive,
2228
- onClick = _a.onClick,
2229
- _c = _a.variant,
2230
- variant = _c === void 0 ? 'desktop' : _c,
2231
- className = _a.className;
2232
- var buttonClasses = classNames(styles$4.tabButton, styles$4["tabButton--".concat(variant)], (_b = {}, _b[styles$4['tabButton--active']] = isActive, _b), className);
2203
+ const TabButton = ({
2204
+ label,
2205
+ count,
2206
+ isActive,
2207
+ onClick,
2208
+ variant = 'desktop',
2209
+ className
2210
+ }) => {
2211
+ const buttonClasses = classNames(styles$4.tabButton, styles$4[`tabButton--${variant}`], {
2212
+ [styles$4['tabButton--active']]: isActive
2213
+ }, className);
2214
+
2233
2215
  // Split label to hide " RESULTS" on mobile
2234
- var labelParts = label.split(' RESULTS');
2235
- var mainLabel = labelParts[0];
2236
- var hasResults = labelParts.length > 1;
2216
+ const labelParts = label.split(' RESULTS');
2217
+ const mainLabel = labelParts[0];
2218
+ const hasResults = labelParts.length > 1;
2237
2219
  return /*#__PURE__*/React.createElement("button", {
2238
2220
  type: "button",
2239
2221
  role: "tab",
2240
2222
  "aria-selected": isActive,
2241
- "aria-controls": "tabpanel-".concat(label.toLowerCase().replace(/\s+/g, '-')),
2223
+ "aria-controls": `tabpanel-${label.toLowerCase().replace(/\s+/g, '-')}`,
2242
2224
  onClick: onClick,
2243
2225
  className: buttonClasses
2244
2226
  }, count !== undefined && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
@@ -2250,7 +2232,7 @@ var TabButton = function (_a) {
2250
2232
  }, " RESULTS")));
2251
2233
  };
2252
2234
 
2253
- var AssistanceIcon = function (props) {
2235
+ const AssistanceIcon = props => {
2254
2236
  return /*#__PURE__*/React.createElement("svg", _extends({
2255
2237
  xmlns: "http://www.w3.org/2000/svg",
2256
2238
  width: "87",
@@ -2265,42 +2247,39 @@ var AssistanceIcon = function (props) {
2265
2247
 
2266
2248
  var styles$3 = {"assistanceBanner":"AssistanceBanner-module__assistanceBanner___b97es","assistanceBanner__icon":"AssistanceBanner-module__assistanceBanner__icon___8NzJj","assistanceBanner__title":"AssistanceBanner-module__assistanceBanner__title___Wtkkt","assistanceBanner__description":"AssistanceBanner-module__assistanceBanner__description___AjoOr","assistanceBanner__link":"AssistanceBanner-module__assistanceBanner__link___5L45N","assistanceBanner__chevron":"AssistanceBanner-module__assistanceBanner__chevron___4km-f"};
2267
2249
 
2268
- /**
2269
- * AssistanceBanner - Help widget for search sidebar
2270
- *
2271
- * Displays a call-to-action for users who need assistance finding products.
2272
- * Features chat icon, heading, description, and contact link with chevron.
2273
- *
2274
- * Desktop only - hidden on mobile to save space.
2275
- *
2276
- * @example
2277
- * ```tsx
2278
- * <AssistanceBanner
2279
- * title="Need Assistance?"
2280
- * description="Can't find what you're looking for? Our team is ready to help."
2281
- * linkText="Contact support"
2282
- * linkUrl="/contact"
2283
- * />
2284
- * ```
2250
+ /**
2251
+ * AssistanceBanner - Help widget for search sidebar
2252
+ *
2253
+ * Displays a call-to-action for users who need assistance finding products.
2254
+ * Features chat icon, heading, description, and contact link with chevron.
2255
+ *
2256
+ * Desktop only - hidden on mobile to save space.
2257
+ *
2258
+ * @example
2259
+ * ```tsx
2260
+ * <AssistanceBanner
2261
+ * title="Need Assistance?"
2262
+ * description="Can't find what you're looking for? Our team is ready to help."
2263
+ * linkText="Contact support"
2264
+ * linkUrl="/contact"
2265
+ * />
2266
+ * ```
2285
2267
  */
2286
- var AssistanceBanner = function (_a) {
2287
- var _b = _a.title,
2288
- title = _b === void 0 ? 'Need Assistance?' : _b,
2289
- _c = _a.description,
2290
- description = _c === void 0 ? "Can't find what you're looking for? Our team is ready to help." : _c,
2291
- _d = _a.linkText,
2292
- linkText = _d === void 0 ? 'Contact support' : _d,
2293
- _e = _a.linkUrl,
2294
- linkUrl = _e === void 0 ? '/contact' : _e,
2295
- onLinkClick = _a.onLinkClick,
2296
- className = _a.className;
2297
- var handleLinkClick = function (e) {
2268
+ const AssistanceBanner = ({
2269
+ title = 'Need Assistance?',
2270
+ description = "Can't find what you're looking for? Our team is ready to help.",
2271
+ linkText = 'Contact support',
2272
+ linkUrl = '/contact',
2273
+ onLinkClick,
2274
+ className
2275
+ }) => {
2276
+ const handleLinkClick = e => {
2298
2277
  if (onLinkClick) {
2299
2278
  e.preventDefault();
2300
2279
  onLinkClick();
2301
2280
  }
2302
2281
  };
2303
- var bannerClasses = classNames(styles$3.assistanceBanner, className);
2282
+ const bannerClasses = classNames(styles$3.assistanceBanner, className);
2304
2283
  return /*#__PURE__*/React.createElement("div", {
2305
2284
  className: bannerClasses
2306
2285
  }, /*#__PURE__*/React.createElement(AssistanceIcon, {
@@ -2333,105 +2312,111 @@ var AssistanceBanner = function (_a) {
2333
2312
 
2334
2313
  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"};
2335
2314
 
2336
- /**
2337
- * FilterDrawer - Mobile slide-in filter panel
2338
- *
2339
- * Slides in from the right with a dark overlay. Used on mobile to show filters
2340
- * when screen space is limited. Includes focus trap, escape key handling, and
2341
- * body scroll prevention.
2342
- *
2343
- * Desktop: Hidden (filters shown in sidebar)
2344
- * Mobile: Slide-in drawer overlay
2345
- *
2346
- * @example
2347
- * ```tsx
2348
- * <FilterDrawer
2349
- * isOpen={isFilterDrawerOpen}
2350
- * onClose={() => setIsFilterDrawerOpen(false)}
2351
- * >
2352
- * <FiltersPanel facets={facets} onFacetToggle={handleToggle} />
2353
- * </FilterDrawer>
2354
- * ```
2315
+ /**
2316
+ * FilterDrawer - Mobile slide-in filter panel
2317
+ *
2318
+ * Slides in from the right with a dark overlay. Used on mobile to show filters
2319
+ * when screen space is limited. Includes focus trap, escape key handling, and
2320
+ * body scroll prevention.
2321
+ *
2322
+ * Desktop: Hidden (filters shown in sidebar)
2323
+ * Mobile: Slide-in drawer overlay
2324
+ *
2325
+ * @example
2326
+ * ```tsx
2327
+ * <FilterDrawer
2328
+ * isOpen={isFilterDrawerOpen}
2329
+ * onClose={() => setIsFilterDrawerOpen(false)}
2330
+ * >
2331
+ * <FiltersPanel facets={facets} onFacetToggle={handleToggle} />
2332
+ * </FilterDrawer>
2333
+ * ```
2355
2334
  */
2356
- var FilterDrawer = function (_a) {
2357
- var _b, _c;
2358
- var isOpen = _a.isOpen,
2359
- onClose = _a.onClose,
2360
- children = _a.children,
2361
- className = _a.className;
2362
- var drawerRef = useRef(null);
2363
- var previouslyFocusedElement = useRef(null);
2335
+ const FilterDrawer = ({
2336
+ isOpen,
2337
+ onClose,
2338
+ children,
2339
+ className
2340
+ }) => {
2341
+ const drawerRef = useRef(null);
2342
+ const previouslyFocusedElement = useRef(null);
2343
+
2364
2344
  // Focus management
2365
- useEffect(function () {
2345
+ useEffect(() => {
2366
2346
  if (isOpen) {
2367
2347
  // Store previously focused element
2368
2348
  previouslyFocusedElement.current = document.activeElement;
2349
+
2369
2350
  // Focus the drawer
2370
2351
  if (drawerRef.current) {
2371
2352
  drawerRef.current.focus();
2372
2353
  }
2354
+
2373
2355
  // Prevent body scroll
2374
2356
  document.body.style.overflow = 'hidden';
2375
2357
  } else {
2376
2358
  // Restore body scroll
2377
2359
  document.body.style.overflow = '';
2360
+
2378
2361
  // Return focus to previously focused element
2379
2362
  if (previouslyFocusedElement.current) {
2380
2363
  previouslyFocusedElement.current.focus();
2381
2364
  }
2382
2365
  }
2383
- return function () {
2366
+ return () => {
2384
2367
  document.body.style.overflow = '';
2385
2368
  };
2386
2369
  }, [isOpen]);
2370
+
2387
2371
  // Escape key handler
2388
- useEffect(function () {
2389
- var handleEscape = function (event) {
2372
+ useEffect(() => {
2373
+ const handleEscape = event => {
2390
2374
  if (event.key === 'Escape' && isOpen) {
2391
2375
  onClose();
2392
2376
  }
2393
2377
  };
2394
2378
  document.addEventListener('keydown', handleEscape);
2395
- return function () {
2396
- return document.removeEventListener('keydown', handleEscape);
2397
- };
2379
+ return () => document.removeEventListener('keydown', handleEscape);
2398
2380
  }, [isOpen, onClose]);
2381
+
2399
2382
  // Focus trap implementation
2400
- useEffect(function () {
2383
+ useEffect(() => {
2401
2384
  if (!isOpen || !drawerRef.current) return;
2402
- var drawer = drawerRef.current;
2403
- var focusableElements = drawer.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
2404
- var firstElement = focusableElements[0];
2405
- var lastElement = focusableElements[focusableElements.length - 1];
2406
- var handleTab = function (event) {
2385
+ const drawer = drawerRef.current;
2386
+ const focusableElements = drawer.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
2387
+ const firstElement = focusableElements[0];
2388
+ const lastElement = focusableElements[focusableElements.length - 1];
2389
+ const handleTab = event => {
2407
2390
  if (event.key !== 'Tab') return;
2408
2391
  if (event.shiftKey) {
2409
2392
  // Shift + Tab
2410
2393
  if (document.activeElement === firstElement) {
2411
2394
  event.preventDefault();
2412
- lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
2395
+ lastElement?.focus();
2413
2396
  }
2414
2397
  } else {
2415
2398
  // Tab
2416
2399
  if (document.activeElement === lastElement) {
2417
2400
  event.preventDefault();
2418
- firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
2401
+ firstElement?.focus();
2419
2402
  }
2420
2403
  }
2421
2404
  };
2422
2405
  drawer.addEventListener('keydown', handleTab);
2423
- return function () {
2424
- return drawer.removeEventListener('keydown', handleTab);
2425
- };
2406
+ return () => drawer.removeEventListener('keydown', handleTab);
2426
2407
  }, [isOpen]);
2427
2408
  if (!isOpen) return null;
2428
- var handleOverlayClick = function (event) {
2409
+ const handleOverlayClick = event => {
2429
2410
  if (event.target === event.currentTarget) {
2430
2411
  onClose();
2431
2412
  }
2432
2413
  };
2433
- var overlayClasses = classNames(styles$2.drawerOverlay, (_b = {}, _b[styles$2['drawerOverlay--open']] = isOpen, _b));
2434
- var panelClasses = classNames(styles$2.drawerPanel, (_c = {}, _c[styles$2['drawerPanel--open']] = isOpen, _c), className);
2414
+ const overlayClasses = classNames(styles$2.drawerOverlay, {
2415
+ [styles$2['drawerOverlay--open']]: isOpen
2416
+ });
2417
+ const panelClasses = classNames(styles$2.drawerPanel, {
2418
+ [styles$2['drawerPanel--open']]: isOpen
2419
+ }, className);
2435
2420
  return /*#__PURE__*/React.createElement("div", {
2436
2421
  className: overlayClasses,
2437
2422
  onClick: handleOverlayClick,
@@ -2455,63 +2440,63 @@ var FilterDrawer = function (_a) {
2455
2440
  }, children)));
2456
2441
  };
2457
2442
 
2458
- var FederatedResultsView = function (_a) {
2459
- var query = _a.query,
2460
- onQueryChange = _a.onQueryChange,
2461
- onSearchSubmit = _a.onSearchSubmit,
2462
- activeTab = _a.activeTab,
2463
- onTabChange = _a.onTabChange,
2464
- products = _a.products,
2465
- contents = _a.contents,
2466
- isLoadingProducts = _a.isLoadingProducts,
2467
- isLoadingContents = _a.isLoadingContents,
2468
- productsError = _a.productsError,
2469
- contentsError = _a.contentsError,
2470
- currentPage = _a.currentPage,
2471
- totalPages = _a.totalPages,
2472
- onPageChange = _a.onPageChange,
2473
- facets = _a.facets,
2474
- onFacetToggle = _a.onFacetToggle,
2475
- isFilterDrawerOpen = _a.isFilterDrawerOpen,
2476
- onFilterDrawerToggle = _a.onFilterDrawerToggle,
2477
- onFilterDrawerClose = _a.onFilterDrawerClose;
2478
- var isLoading = activeTab === "products" && isLoadingProducts || activeTab === "content" && isLoadingContents;
2479
- var error = activeTab === "products" ? productsError : contentsError;
2443
+ const FederatedResultsView = ({
2444
+ query,
2445
+ onQueryChange,
2446
+ onSearchSubmit,
2447
+ activeTab,
2448
+ onTabChange,
2449
+ products,
2450
+ contents,
2451
+ isLoadingProducts,
2452
+ isLoadingContents,
2453
+ productsError,
2454
+ contentsError,
2455
+ currentPage,
2456
+ totalPages,
2457
+ onPageChange,
2458
+ facets,
2459
+ onFacetToggle,
2460
+ isFilterDrawerOpen,
2461
+ onFilterDrawerToggle,
2462
+ onFilterDrawerClose
2463
+ }) => {
2464
+ const isLoading = activeTab === "products" && isLoadingProducts || activeTab === "content" && isLoadingContents;
2465
+ const error = activeTab === "products" ? productsError : contentsError;
2466
+
2480
2467
  // Filter results based on active tab
2481
- var displayProducts = activeTab === "content" ? [] : products;
2482
- var displayContents = activeTab === "products" ? [] : contents;
2468
+ const displayProducts = activeTab === "content" ? [] : products;
2469
+ const displayContents = activeTab === "products" ? [] : contents;
2470
+
2483
2471
  // Content tab single-select handler (clears all others when selecting)
2484
- var handleContentCategorySelect = useCallback(function (attribute, value) {
2485
- var facet = facets.find(function (f) {
2486
- return f.attribute === attribute;
2487
- });
2472
+ const handleContentCategorySelect = useCallback((attribute, value) => {
2473
+ const facet = facets.find(f => f.attribute === attribute);
2488
2474
  if (!facet) return;
2475
+
2489
2476
  // Clear ALL values in this facet first
2490
- facet.values.forEach(function (v) {
2477
+ facet.values.forEach(v => {
2491
2478
  if (v.isRefined) {
2492
2479
  onFacetToggle(attribute, v.value); // Unselect
2493
2480
  }
2494
2481
  });
2482
+
2495
2483
  // Then select the clicked value (if not already selected)
2496
- var clickedValue = facet.values.find(function (v) {
2497
- return v.value === value;
2498
- });
2484
+ const clickedValue = facet.values.find(v => v.value === value);
2499
2485
  if (clickedValue && !clickedValue.isRefined) {
2500
2486
  onFacetToggle(attribute, value); // Select
2501
2487
  }
2502
2488
  }, [facets, onFacetToggle]);
2489
+
2503
2490
  // Track if any filters applied
2504
- var hasAppliedFilters = useMemo(function () {
2505
- return facets.some(function (facet) {
2506
- return facet.values.some(function (value) {
2507
- return value.isRefined;
2508
- });
2509
- });
2491
+ const hasAppliedFilters = useMemo(() => {
2492
+ return facets.some(facet => facet.values.some(value => value.isRefined));
2510
2493
  }, [facets]);
2494
+
2511
2495
  // Track previous filter state to detect transitions
2512
- var prevHasAppliedFilters = useRef(hasAppliedFilters);
2496
+ const prevHasAppliedFilters = useRef(hasAppliedFilters);
2497
+
2513
2498
  // Auto-close drawer when transitioning FROM filters applied TO no filters (mobile only)
2514
- useEffect(function () {
2499
+ useEffect(() => {
2515
2500
  // Only close if we HAD filters and now have NONE (not on initial open)
2516
2501
  if (prevHasAppliedFilters.current && !hasAppliedFilters && isFilterDrawerOpen && onFilterDrawerClose) {
2517
2502
  onFilterDrawerClose();
@@ -2521,7 +2506,7 @@ var FederatedResultsView = function (_a) {
2521
2506
  return /*#__PURE__*/React.createElement("div", {
2522
2507
  className: styles$5.resultsView
2523
2508
  }, /*#__PURE__*/React.createElement("div", {
2524
- className: "".concat(styles$5.searchBarWrapper, " ").concat(styles$5.searchBarDesktopOnly)
2509
+ className: `${styles$5.searchBarWrapper} ${styles$5.searchBarDesktopOnly}`
2525
2510
  }, /*#__PURE__*/React.createElement(SearchBar, {
2526
2511
  value: query,
2527
2512
  onChange: onQueryChange,
@@ -2529,7 +2514,7 @@ var FederatedResultsView = function (_a) {
2529
2514
  placeholder: "Refine your search...",
2530
2515
  variant: "results"
2531
2516
  })), /*#__PURE__*/React.createElement("div", {
2532
- className: "".concat(styles$5.tabsContainer, " ").concat(styles$5.tabsContainerDesktopOnly)
2517
+ className: `${styles$5.tabsContainer} ${styles$5.tabsContainerDesktopOnly}`
2533
2518
  }, /*#__PURE__*/React.createElement("div", {
2534
2519
  className: styles$5.tabs,
2535
2520
  role: "tablist"
@@ -2537,9 +2522,7 @@ var FederatedResultsView = function (_a) {
2537
2522
  label: "WEB SHOP RESULTS",
2538
2523
  count: products.length,
2539
2524
  isActive: activeTab === "products",
2540
- onClick: function () {
2541
- return onTabChange("products");
2542
- },
2525
+ onClick: () => onTabChange("products"),
2543
2526
  variant: "desktop"
2544
2527
  }), /*#__PURE__*/React.createElement("div", {
2545
2528
  className: styles$5.tabSeparator
@@ -2547,9 +2530,7 @@ var FederatedResultsView = function (_a) {
2547
2530
  label: "WEBSITE RESULTS",
2548
2531
  count: contents.length,
2549
2532
  isActive: activeTab === "content",
2550
- onClick: function () {
2551
- return onTabChange("content");
2552
- },
2533
+ onClick: () => onTabChange("content"),
2553
2534
  variant: "desktop"
2554
2535
  })), onFilterDrawerToggle && /*#__PURE__*/React.createElement("button", {
2555
2536
  type: "button",
@@ -2578,9 +2559,9 @@ var FederatedResultsView = function (_a) {
2578
2559
  })), /*#__PURE__*/React.createElement("main", {
2579
2560
  className: styles$5.mainContent
2580
2561
  }, /*#__PURE__*/React.createElement("div", {
2581
- id: "tabpanel-".concat(activeTab),
2562
+ id: `tabpanel-${activeTab}`,
2582
2563
  role: "tabpanel",
2583
- "aria-labelledby": "tab-".concat(activeTab)
2564
+ "aria-labelledby": `tab-${activeTab}`
2584
2565
  }, /*#__PURE__*/React.createElement(ResultsList, {
2585
2566
  type: activeTab,
2586
2567
  products: displayProducts,
@@ -2595,7 +2576,7 @@ var FederatedResultsView = function (_a) {
2595
2576
  onPageChange: onPageChange,
2596
2577
  maxVisiblePages: 10,
2597
2578
  showPrevious: false,
2598
- ariaLabel: "".concat(activeTab === "products" ? "Products" : "Content", " pagination")
2579
+ ariaLabel: `${activeTab === "products" ? "Products" : "Content"} pagination`
2599
2580
  }))))), onFilterDrawerClose && /*#__PURE__*/React.createElement(FilterDrawer, {
2600
2581
  isOpen: isFilterDrawerOpen || false,
2601
2582
  onClose: onFilterDrawerClose
@@ -2609,76 +2590,73 @@ var FederatedResultsView = function (_a) {
2609
2590
 
2610
2591
  var styles$1 = {"searchExperience":"FederatedSearchExperience-module__searchExperience___gug9X","searchBarSection":"FederatedSearchExperience-module__searchBarSection___f0Ykq","searchBarDesktopOnly":"FederatedSearchExperience-module__searchBarDesktopOnly___CetKZ","searchBarMobileOnly":"FederatedSearchExperience-module__searchBarMobileOnly___Ityxp","resultsHeaderMobileOnly":"FederatedSearchExperience-module__resultsHeaderMobileOnly___09ef-","tabsContainerSticky":"FederatedSearchExperience-module__tabsContainerSticky___-HdY5","tabs":"FederatedSearchExperience-module__tabs___Vatv8","tabSeparator":"FederatedSearchExperience-module__tabSeparator___AUjhW","mobileFilterButtonWrapper":"FederatedSearchExperience-module__mobileFilterButtonWrapper___JkRtk","mobileFilterButton":"FederatedSearchExperience-module__mobileFilterButton___sRc-w","filterIndicatorDot":"FederatedSearchExperience-module__filterIndicatorDot___vqVi2","instantResultsSection":"FederatedSearchExperience-module__instantResultsSection___AG3qn","fullResultsSection":"FederatedSearchExperience-module__fullResultsSection___NH16U"};
2611
2592
 
2612
- /**
2613
- * FederatedSearchExperience - Top-level search experience component
2614
- *
2615
- * This component orchestrates the entire federated search experience, including:
2616
- * - Modal container
2617
- * - Search input
2618
- * - Instant results (2-column layout)
2619
- * - Full results view with tabs and filters
2620
- *
2621
- * The component is fully controlled and does not contain any data fetching logic.
2622
- * All data and callbacks are passed in via props, making it suitable for use in AEM
2623
- * where a controller layer will handle Algolia integration.
2624
- *
2625
- * @example
2626
- * ```tsx
2627
- * <FederatedSearchExperience
2628
- * isOpen={isOpen}
2629
- * onOpen={handleOpen}
2630
- * onClose={handleClose}
2631
- * query={query}
2632
- * onQueryChange={setQuery}
2633
- * onSearchSubmit={handleSubmit}
2634
- * products={products}
2635
- * contents={contents}
2636
- * isLoadingProducts={isLoadingProducts}
2637
- * isLoadingContents={isLoadingContents}
2638
- * onSeeAllProducts={handleSeeAllProducts}
2639
- * onSeeAllContents={handleSeeAllContents}
2640
- * onSeeAllCombined={handleSeeAllCombined}
2641
- * activeView={activeView}
2642
- * onChangeView={setActiveView}
2643
- * activeTab={activeTab}
2644
- * onTabChange={setActiveTab}
2645
- * />
2646
- * ```
2593
+ /**
2594
+ * FederatedSearchExperience - Top-level search experience component
2595
+ *
2596
+ * This component orchestrates the entire federated search experience, including:
2597
+ * - Modal container
2598
+ * - Search input
2599
+ * - Instant results (2-column layout)
2600
+ * - Full results view with tabs and filters
2601
+ *
2602
+ * The component is fully controlled and does not contain any data fetching logic.
2603
+ * All data and callbacks are passed in via props, making it suitable for use in AEM
2604
+ * where a controller layer will handle Algolia integration.
2605
+ *
2606
+ * @example
2607
+ * ```tsx
2608
+ * <FederatedSearchExperience
2609
+ * isOpen={isOpen}
2610
+ * onOpen={handleOpen}
2611
+ * onClose={handleClose}
2612
+ * query={query}
2613
+ * onQueryChange={setQuery}
2614
+ * onSearchSubmit={handleSubmit}
2615
+ * products={products}
2616
+ * contents={contents}
2617
+ * isLoadingProducts={isLoadingProducts}
2618
+ * isLoadingContents={isLoadingContents}
2619
+ * onSeeAllProducts={handleSeeAllProducts}
2620
+ * onSeeAllContents={handleSeeAllContents}
2621
+ * onSeeAllCombined={handleSeeAllCombined}
2622
+ * activeView={activeView}
2623
+ * onChangeView={setActiveView}
2624
+ * activeTab={activeTab}
2625
+ * onTabChange={setActiveTab}
2626
+ * />
2627
+ * ```
2647
2628
  */
2648
- var FederatedSearchExperience = function (_a) {
2649
- var isOpen = _a.isOpen,
2650
- onClose = _a.onClose,
2651
- query = _a.query,
2652
- onQueryChange = _a.onQueryChange,
2653
- onSearchSubmit = _a.onSearchSubmit,
2654
- products = _a.products,
2655
- contents = _a.contents,
2656
- isLoadingProducts = _a.isLoadingProducts,
2657
- isLoadingContents = _a.isLoadingContents,
2658
- productsError = _a.productsError,
2659
- contentsError = _a.contentsError,
2660
- onSeeAllProducts = _a.onSeeAllProducts,
2661
- onSeeAllContents = _a.onSeeAllContents,
2662
- onSeeAllCombined = _a.onSeeAllCombined,
2663
- activeView = _a.activeView;
2664
- _a.onChangeView;
2665
- var activeTab = _a.activeTab,
2666
- onTabChange = _a.onTabChange,
2667
- currentPage = _a.currentPage,
2668
- totalPages = _a.totalPages,
2669
- onPageChange = _a.onPageChange,
2670
- facets = _a.facets,
2671
- onFacetToggle = _a.onFacetToggle,
2672
- isFilterDrawerOpen = _a.isFilterDrawerOpen,
2673
- onFilterDrawerToggle = _a.onFilterDrawerToggle,
2674
- onFilterDrawerClose = _a.onFilterDrawerClose;
2629
+ const FederatedSearchExperience = ({
2630
+ isOpen,
2631
+ onClose,
2632
+ query,
2633
+ onQueryChange,
2634
+ onSearchSubmit,
2635
+ products,
2636
+ contents,
2637
+ isLoadingProducts,
2638
+ isLoadingContents,
2639
+ productsError,
2640
+ contentsError,
2641
+ onSeeAllProducts,
2642
+ onSeeAllContents,
2643
+ onSeeAllCombined,
2644
+ activeView,
2645
+ onChangeView,
2646
+ activeTab,
2647
+ onTabChange,
2648
+ currentPage,
2649
+ totalPages,
2650
+ onPageChange,
2651
+ facets,
2652
+ onFacetToggle,
2653
+ isFilterDrawerOpen,
2654
+ onFilterDrawerToggle,
2655
+ onFilterDrawerClose
2656
+ }) => {
2675
2657
  // Track if any filters are active (for red dot indicator)
2676
- var hasAppliedFilters = useMemo(function () {
2677
- return facets.some(function (facet) {
2678
- return facet.values.some(function (value) {
2679
- return value.isRefined;
2680
- });
2681
- });
2658
+ const hasAppliedFilters = useMemo(() => {
2659
+ return facets.some(facet => facet.values.some(value => value.isRefined));
2682
2660
  }, [facets]);
2683
2661
  return /*#__PURE__*/React.createElement(SearchModal, {
2684
2662
  isOpen: isOpen,
@@ -2710,9 +2688,7 @@ var FederatedSearchExperience = function (_a) {
2710
2688
  label: "WEB SHOP RESULTS",
2711
2689
  count: products.length,
2712
2690
  isActive: activeTab === "products",
2713
- onClick: function () {
2714
- return onTabChange("products");
2715
- },
2691
+ onClick: () => onTabChange("products"),
2716
2692
  variant: "mobile"
2717
2693
  }), /*#__PURE__*/React.createElement("div", {
2718
2694
  className: styles$1.tabSeparator
@@ -2720,9 +2696,7 @@ var FederatedSearchExperience = function (_a) {
2720
2696
  label: "WEBSITE RESULTS",
2721
2697
  count: contents.length,
2722
2698
  isActive: activeTab === "content",
2723
- onClick: function () {
2724
- return onTabChange("content");
2725
- },
2699
+ onClick: () => onTabChange("content"),
2726
2700
  variant: "mobile"
2727
2701
  })), /*#__PURE__*/React.createElement("div", {
2728
2702
  className: styles$1.mobileFilterButtonWrapper
@@ -2747,7 +2721,7 @@ var FederatedSearchExperience = function (_a) {
2747
2721
  }, /*#__PURE__*/React.createElement("div", {
2748
2722
  className: styles$1.searchExperience
2749
2723
  }, activeView === "instant" && /*#__PURE__*/React.createElement("div", {
2750
- className: "".concat(styles$1.searchBarSection, " ").concat(styles$1.searchBarDesktopOnly)
2724
+ className: `${styles$1.searchBarSection} ${styles$1.searchBarDesktopOnly}`
2751
2725
  }, /*#__PURE__*/React.createElement(SearchBar, {
2752
2726
  value: query,
2753
2727
  onChange: onQueryChange,
@@ -2815,14 +2789,13 @@ var FederatedSearchExperience = function (_a) {
2815
2789
 
2816
2790
  var styles = {"searchTrigger":"SearchTriggerButton-module__searchTrigger___PDbDB","searchIcon":"SearchTriggerButton-module__searchIcon___izByW","label":"SearchTriggerButton-module__label___mkS7T"};
2817
2791
 
2818
- var SearchTriggerButton = function (_a) {
2819
- var onOpen = _a.onOpen,
2820
- _b = _a.ariaLabel,
2821
- ariaLabel = _b === void 0 ? 'Open search' : _b,
2822
- label = _a.label,
2823
- _c = _a.className,
2824
- className = _c === void 0 ? '' : _c;
2825
- var handleKeyDown = function (event) {
2792
+ const SearchTriggerButton = ({
2793
+ onOpen,
2794
+ ariaLabel = 'Open search',
2795
+ label,
2796
+ className = ''
2797
+ }) => {
2798
+ const handleKeyDown = event => {
2826
2799
  if (event.key === 'Enter' || event.key === ' ') {
2827
2800
  event.preventDefault();
2828
2801
  onOpen();
@@ -2833,7 +2806,7 @@ var SearchTriggerButton = function (_a) {
2833
2806
  onClick: onOpen,
2834
2807
  onKeyDown: handleKeyDown,
2835
2808
  "aria-label": ariaLabel,
2836
- className: "".concat(styles.searchTrigger, " ").concat(className)
2809
+ className: `${styles.searchTrigger} ${className}`
2837
2810
  }, /*#__PURE__*/React.createElement("svg", {
2838
2811
  className: styles.searchIcon,
2839
2812
  xmlns: "http://www.w3.org/2000/svg",