@sonic-equipment/ui 0.0.77 → 0.0.79

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.
package/dist/index.js CHANGED
@@ -344,48 +344,47 @@ const request = (function createRequestFunction() {
344
344
  return request;
345
345
  })();
346
346
 
347
+ const features = {
348
+ pdp: 'pdpV2',
349
+ plp: 'plpV2',
350
+ search: 'searchV2',
351
+ };
352
+ const HAS_LOCAL_STORAGE_SUPPORT = typeof localStorage !== 'undefined';
347
353
  function useFeatureFlags() {
348
354
  const { search } = typeof window !== 'undefined'
349
355
  ? window.location
350
356
  : {
351
357
  search: '',
352
358
  };
353
- const queryParams = qs.parse(search);
354
- const hasNewQueryParam = queryParams['new'] !== undefined;
355
- const hasFeaturesQueryParam = queryParams['features'] !== undefined;
356
- const showNewPageQueryValue = String(queryParams['new']).toLowerCase() === 'true';
357
- const features = String(queryParams['features']).toLowerCase().split(',');
358
- const plpV2QueryStringParam = hasNewQueryParam
359
- ? showNewPageQueryValue
360
- : features.includes('plp');
361
- const pdpV2QueryStringParam = hasNewQueryParam
362
- ? showNewPageQueryValue
363
- : features.includes('pdp');
364
- const searchV2QueryStringParam = hasNewQueryParam
365
- ? showNewPageQueryValue
366
- : features.includes('search');
367
- const hasLocalStorageSupport = typeof localStorage !== 'undefined';
368
- if (hasLocalStorageSupport && (hasFeaturesQueryParam || hasNewQueryParam)) {
369
- localStorage.setItem('plpV2', plpV2QueryStringParam.toString());
370
- localStorage.setItem('pdpV2', pdpV2QueryStringParam.toString());
371
- localStorage.setItem('searchV2', searchV2QueryStringParam.toString());
372
- }
373
- const plpV2 = useMemo(() => hasLocalStorageSupport
374
- ? localStorage.getItem('plpV2') === 'true'
375
- : plpV2QueryStringParam,
376
- // eslint-disable-next-line react-hooks/exhaustive-deps
377
- [plpV2QueryStringParam]);
378
- const pdpV2 = useMemo(() => hasLocalStorageSupport
379
- ? localStorage.getItem('pdpV2') === 'true'
380
- : pdpV2QueryStringParam,
381
- // eslint-disable-next-line react-hooks/exhaustive-deps
382
- [pdpV2QueryStringParam]);
383
- const searchV2 = useMemo(() => hasLocalStorageSupport
384
- ? localStorage.getItem('searchV2') === 'true'
385
- : searchV2QueryStringParam,
386
- // eslint-disable-next-line react-hooks/exhaustive-deps
387
- [searchV2QueryStringParam]);
388
- return { pdpV2, plpV2, searchV2 };
359
+ return useMemo(() => {
360
+ const queryParams = qs.parse(search);
361
+ const showNewPageQueryValue = String(queryParams['new']).toLowerCase() === 'true';
362
+ const hasQueryStringFeatures = Boolean(queryParams['features']);
363
+ if (!showNewPageQueryValue && !hasQueryStringFeatures) {
364
+ /* When no new feature flags are set get them from localStorage */
365
+ return Object.entries(features).reduce((acc, [, value]) => ({
366
+ ...acc,
367
+ [value]: localStorage.getItem(value) === 'true',
368
+ }), {});
369
+ }
370
+ const queryStringFeatures = String(queryParams['features'])
371
+ .toLowerCase()
372
+ .split(',');
373
+ const featureResults = Object.entries(features).map(([key, value]) => ({
374
+ key: key,
375
+ selected: showNewPageQueryValue || queryStringFeatures.includes(key),
376
+ value: value,
377
+ }));
378
+ featureResults.forEach(({ selected, value }) => {
379
+ if (!HAS_LOCAL_STORAGE_SUPPORT)
380
+ return;
381
+ localStorage.setItem(value, selected.toString());
382
+ });
383
+ return featureResults.reduce((acc, { selected, value }) => ({
384
+ ...acc,
385
+ [value]: selected,
386
+ }), {});
387
+ }, [search]);
389
388
  }
390
389
 
391
390
  var CurrencyPositioningType;
@@ -1163,16 +1162,20 @@ function useNavigate() {
1163
1162
  };
1164
1163
  }
1165
1164
 
1166
- var styles$W = {"link":"link-module-xLqBn","primary":"link-module-bGD6u","secondary":"link-module-v31wH","has-underline":"link-module-UuCEp"};
1165
+ var styles$X = {"link":"link-module-xLqBn","primary":"link-module-bGD6u","secondary":"link-module-v31wH","has-underline":"link-module-UuCEp"};
1167
1166
 
1168
- function Link({ children, className, color = 'primary', hasUnderline, onClick: _onClick, ...props }) {
1167
+ function Link({ children, className, color = 'primary', hasUnderline, onClick: _onClick, ref, ...props }) {
1169
1168
  function onClick(e) {
1170
1169
  _onClick?.(e);
1171
1170
  if (props.href)
1172
1171
  return;
1173
1172
  e.preventDefault();
1174
1173
  }
1175
- return (jsx(Link$1, { className: clsx({ [styles$W['has-underline']]: hasUnderline }, styles$W['link'], styles$W[color], className),
1174
+ const linkRef = ref ||
1175
+ (ref =>
1176
+ // Workaround for react/react-aria #1513
1177
+ ref?.addEventListener('touchend', e => e.preventDefault()));
1178
+ return (jsx(Link$1, { ref: linkRef, className: clsx({ [styles$X['has-underline']]: hasUnderline }, styles$X['link'], styles$X[color], className),
1176
1179
  // Workaround for adobe/react-spectrum #963
1177
1180
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
1178
1181
  // @ts-ignore
@@ -1219,7 +1222,9 @@ function Button({ _pseudo = 'none', children, className, color = 'primary', cond
1219
1222
  window.location.href = href;
1220
1223
  e.preventDefault();
1221
1224
  };
1222
- return (jsxs(Button$1, { className: clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), isDisabled: isDisabled,
1225
+ return (jsxs(Button$1, { ref: ref =>
1226
+ // Workaround for react/react-aria #1513
1227
+ ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), isDisabled: isDisabled,
1223
1228
  // Workaround for adobe/react-spectrum #963
1224
1229
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
1225
1230
  // @ts-ignore
@@ -1271,24 +1276,24 @@ function SolidHomeIcon(props) {
1271
1276
  return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M15.039782,22 C14.6690193,22 14.3684378,21.6994185 14.3684378,21.3286559 L14.3684378,15.6029043 L9.34495251,15.6029043 L9.34495251,21.3286559 C9.34495251,21.6994185 9.04437101,22 8.67345678,22 L3.67134415,22 C3.3005815,22 3,21.6994185 3,21.3286559 L3,9.79560307 C3,9.60127857 3.08412644,9.41665514 3.23055192,9.28917706 L11.4158271,2.16495603 C11.6686612,1.94501466 12.0447291,1.94501466 12.2975632,2.16495603 L20.4828384,9.28917706 C20.6292639,9.41665514 20.7133903,9.60127857 20.7133903,9.79560307 L20.7133903,21.3286559 C20.7133903,21.6994185 20.4128088,22 20.0418946,22 L15.039782,22 Z", fillRule: "evenodd" }) }));
1272
1277
  }
1273
1278
 
1274
- var styles$V = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ"};
1279
+ var styles$W = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ"};
1275
1280
 
1276
1281
  function BreadcrumbShort({ links }) {
1277
1282
  const homeLink = links[0];
1278
1283
  const previousLink = links[links.length - 2];
1279
1284
  const isHomeLink = previousLink === undefined || previousLink === homeLink;
1280
1285
  const href = previousLink?.href || homeLink?.href;
1281
- return (jsx(Breadcrumbs, { className: styles$V.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles$V.breadcrumb, children: jsxs(RouteLink, { className: styles$V.link, href: href, isDisabled: false, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles$V.icon }), isHomeLink ? (jsx(SolidHomeIcon, { className: styles$V.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
1286
+ return (jsx(Breadcrumbs, { className: styles$W.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles$W.breadcrumb, children: jsxs(RouteLink, { className: styles$W.link, href: href, isDisabled: false, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles$W.icon }), isHomeLink ? (jsx(SolidHomeIcon, { className: styles$W.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
1282
1287
  }
1283
1288
  function BreadcrumbLongItem({ index, isDisabled, link, }) {
1284
- return (jsx(Breadcrumb$1, { className: styles$V.breadcrumb, children: jsxs(RouteLink, { className: styles$V.link, color: "secondary", href: link.href, isDisabled: isDisabled, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles$V['previous-icon'], styles$V.icon) }), link.label] }) }, index));
1289
+ return (jsx(Breadcrumb$1, { className: styles$W.breadcrumb, children: jsxs(RouteLink, { className: styles$W.link, color: "secondary", href: link.href, isDisabled: isDisabled, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles$W['previous-icon'], styles$W.icon) }), link.label] }) }, index));
1285
1290
  }
1286
1291
  function BreadcrumbLong({ links }) {
1287
1292
  const linksWithoutFirst = links.slice(1);
1288
1293
  const homeLink = links[0];
1289
1294
  if (!homeLink)
1290
1295
  return null;
1291
- return (jsxs(Breadcrumbs, { className: styles$V.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles$V.breadcrumb, children: jsx(RouteLink, { className: styles$V.link, href: homeLink.href, children: jsx(SolidHomeIcon, { className: clsx(styles$V['home-icon'], styles$V.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, index)))] }));
1296
+ return (jsxs(Breadcrumbs, { className: styles$W.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles$W.breadcrumb, children: jsx(RouteLink, { className: styles$W.link, href: homeLink.href, children: jsx(SolidHomeIcon, { className: clsx(styles$W['home-icon'], styles$W.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, index)))] }));
1292
1297
  }
1293
1298
  function Breadcrumb({ links }) {
1294
1299
  const { lg } = useBreakpoint();
@@ -1297,10 +1302,12 @@ function Breadcrumb({ links }) {
1297
1302
  return lg ? BreadcrumbLong({ links }) : BreadcrumbShort({ links });
1298
1303
  }
1299
1304
 
1300
- var styles$U = {"icon-button":"icon-button-module-4PDK-","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo"};
1305
+ var styles$V = {"icon-button":"icon-button-module-4PDK-","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo"};
1301
1306
 
1302
1307
  function IconButton({ children, className, color = 'primary', isDisabled, onPress, size = 'md', type = 'button', }) {
1303
- return (jsx(Button$1, { className: clsx(styles$U['icon-button'], styles$U[size], styles$U[color], className), isDisabled: isDisabled,
1308
+ return (jsx(Button$1, { ref: ref =>
1309
+ // Workaround for react/react-aria #1513
1310
+ ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$V['icon-button'], styles$V[size], styles$V[color], className), isDisabled: isDisabled,
1304
1311
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
1305
1312
  // @ts-expect-error
1306
1313
  onClick: e => e.preventDefault(), onPress: onPress, type: type, children: children }));
@@ -1314,21 +1321,21 @@ function StrokeFavoriteIcon(props) {
1314
1321
  return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M7.33319295,3.33090958 C5.12714802,3.33090958 3.33232058,5.12348359 3.33232058,7.32679321 C3.33232058,8.18447047 3.64878056,9.03643889 4.29989998,9.93107334 L11.9997744,20.2227497 L19.7053643,9.92401241 C20.351069,9.03643889 20.6673786,8.1846207 20.6673786,7.32679321 C20.6673786,5.12348359 18.8727016,3.33090958 16.6666566,3.33090958 C14.8537801,3.33090958 13.1222748,4.56251549 12.6388611,6.19569283 C12.5552338,6.47843037 12.2951771,6.67253074 11.9999248,6.67253074 C11.7046724,6.67253074 11.4447662,6.47843037 11.3609885,6.19569283 C10.8775748,4.56251549 9.14606944,3.33090958 7.33319295,3.33090958 M11.9997744,22 L11.9997744,22 C11.7898038,22 11.5918659,21.9008466 11.4662746,21.7327364 L3.22718487,10.720545 C2.41106707,9.59905954 2,8.45954615 2,7.32679321 C2,4.3895979 4.39240135,2 7.33319295,2 C9.22488362,2 11.0018124,2.98206975 11.9999248,4.46786903 C12.9978868,2.98206975 14.774966,2 16.6666566,2 C19.6072978,2 22,4.3895979 22,7.32679321 C22,8.45969638 21.5887825,9.59920978 20.777929,10.7136343 L12.5334246,21.7327364 C12.4076829,21.9008466 12.2098954,22 11.9997744,22", fillRule: "evenodd" }) }));
1315
1322
  }
1316
1323
 
1317
- var styles$T = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q","favorite-on":"favorite-button-module-6Tsmy","favorite-off":"favorite-button-module-LQauU"};
1324
+ var styles$U = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q","favorite-on":"favorite-button-module-6Tsmy","favorite-off":"favorite-button-module-LQauU"};
1318
1325
 
1319
1326
  function FavoriteButton({ isDisabled, isFavorite, onPress, }) {
1320
- return (jsx(IconButton, { className: clsx(styles$T['favorite-button'], {
1321
- [styles$T['is-favorite']]: isFavorite,
1327
+ return (jsx(IconButton, { className: clsx(styles$U['favorite-button'], {
1328
+ [styles$U['is-favorite']]: isFavorite,
1322
1329
  }), color: "secondary", isDisabled: isDisabled, onPress: onPress, children: isFavorite ? jsx(SolidFavoriteIcon, {}) : jsx(StrokeFavoriteIcon, {}) }));
1323
1330
  }
1324
1331
 
1325
- var styles$S = {"field-error":"field-error-module-FXnIg"};
1332
+ var styles$T = {"field-error":"field-error-module-FXnIg"};
1326
1333
 
1327
1334
  function FieldError({ children }) {
1328
- return (jsx(FieldError$1, { className: styles$S['field-error'], children: children }));
1335
+ return (jsx(FieldError$1, { className: styles$T['field-error'], children: children }));
1329
1336
  }
1330
1337
 
1331
- var styles$R = {"input-container":"input-module-2woJR","shadow-input":"input-module-pNKEt","lg":"input-module-Dx2qC","md":"input-module-sH6e7","focus":"input-module-hEEuy","growing-input":"input-module-6HwY4"};
1338
+ var styles$S = {"input-container":"input-module-2woJR","shadow-input":"input-module-pNKEt","lg":"input-module-Dx2qC","md":"input-module-sH6e7","focus":"input-module-hEEuy","growing-input":"input-module-6HwY4"};
1332
1339
 
1333
1340
  /**
1334
1341
  * This component is used to create an input that grows as the user types.
@@ -1344,20 +1351,20 @@ const Input = forwardRef(({ _pseudo = 'none', autoGrow, size = 'lg', ...inputPro
1344
1351
  ? onChange?.(event)
1345
1352
  : setUncontrolledValue(event.target.value);
1346
1353
  const { pressProps } = usePress({});
1347
- return (jsx("div", { className: clsx(styles$R['input-container'], styles$R[size], styles$R[_pseudo]), children: jsxs("div", { className: clsx({ [styles$R['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ...pressProps, ref: ref, onChange: handleChange, onClick: e => {
1354
+ return (jsx("div", { className: clsx(styles$S['input-container'], styles$S[size], styles$S[_pseudo]), children: jsxs("div", { className: clsx({ [styles$S['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ...pressProps, ref: ref, onChange: handleChange, onClick: e => {
1348
1355
  e.preventDefault();
1349
1356
  e.stopPropagation();
1350
1357
  e.target.focus();
1351
- } }), autoGrow && jsx("span", { className: styles$R['shadow-input'], children: value })] }) }));
1358
+ } }), autoGrow && jsx("span", { className: styles$S['shadow-input'], children: value })] }) }));
1352
1359
  });
1353
1360
  Input.displayName = 'Input';
1354
1361
 
1355
- var styles$Q = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
1362
+ var styles$R = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
1356
1363
 
1357
1364
  function Label({ children, isRequired }) {
1358
1365
  if (!children)
1359
1366
  return null;
1360
- return (jsxs(Label$1, { className: styles$Q.label, children: [children, isRequired && jsx("span", { className: styles$Q.required, children: "*" })] }));
1367
+ return (jsxs(Label$1, { className: styles$R.label, children: [children, isRequired && jsx("span", { className: styles$R.required, children: "*" })] }));
1361
1368
  }
1362
1369
 
1363
1370
  function StrokeCollapseIcon(props) {
@@ -1372,7 +1379,7 @@ function StrokeTrashIcon(props) {
1372
1379
  return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M7.77273912,6.04398453 L9.07201126,6.04398453 L9.07201126,4.11757519 C9.07201126,3.84748949 9.15880324,3.63104347 9.33238719,3.46823712 C9.50597114,3.30543077 9.73570292,3.22402759 10.0215825,3.22402759 L13.3263825,3.22402759 C13.6186194,3.22402759 13.850313,3.30543077 14.0214633,3.46823712 C14.1926136,3.63104347 14.2781888,3.84748949 14.2781888,4.11757519 L14.2781888,6.04398453 L15.5846129,6.04398453 L15.5846129,4.04352264 C15.5846129,3.40769382 15.3900697,2.90814951 15.0009834,2.5448897 C14.6118971,2.1816299 14.0799703,2 13.405203,2 L9.942762,2 C9.26869007,2 8.73850162,2.1816299 8.35219662,2.5448897 C7.96589162,2.90814951 7.77273912,3.40769382 7.77273912,4.04352264 L7.77273912,6.04398453 Z M3.60955531,6.6940676 L19.7561406,6.6940676 C19.9248076,6.6940676 20.0683931,6.6332263 20.186897,6.51154371 C20.305401,6.38986111 20.3646529,6.242352 20.3646529,6.06901638 C20.3646529,5.9003494 20.3052023,5.75537328 20.186301,5.63408801 C20.0673997,5.51280275 19.9240129,5.45216011 19.7561406,5.45216011 L3.60955531,5.45216011 C3.44734496,5.45216011 3.30519982,5.51300141 3.18311989,5.63468401 C3.06103996,5.75636661 3,5.90114406 3,6.06901638 C3,6.24314666 3.06103996,6.39085444 3.18311989,6.5121397 C3.30519982,6.63342497 3.44734496,6.6940676 3.60955531,6.6940676 Z M7.56920636,22 L15.8049825,22 C16.4210441,22 16.9252074,21.8108208 17.3174724,21.4324624 C17.7097373,21.0541041 17.9209684,20.5545101 17.9511655,19.9336805 L18.6066126,6.5283806 L17.2870766,6.5283806 L16.6578534,19.8059883 C16.6444435,20.0808419 16.5455825,20.3084381 16.3612707,20.4887766 C16.1769588,20.6691152 15.9469787,20.7592845 15.6713303,20.7592845 L7.68497866,20.7592845 C7.41479362,20.7592845 7.18757,20.6677246 7.00330778,20.4846047 C6.81904556,20.3014848 6.72015983,20.0752793 6.70665057,19.8059883 L6.05358753,6.5295726 L4.76996029,6.5295726 L5.41587138,19.9420245 C5.4468632,20.562854 5.65806942,21.0610573 6.04949005,21.4366344 C6.44091068,21.8122115 6.94748278,22 7.56920636,22 Z M9.00213069,19.1375783 C9.15957307,19.1375783 9.2862223,19.0920591 9.38207839,19.0010206 C9.47793448,18.9099822 9.5230812,18.7917017 9.51751857,18.6461793 L9.2314403,8.86811345 C9.22587767,8.72338566 9.17618647,8.60729053 9.0823667,8.51982806 C8.98854694,8.43236558 8.86649184,8.38863435 8.71620142,8.38863435 C8.55945437,8.38863435 8.43436962,8.43395491 8.34094719,8.52459603 C8.24752475,8.61523714 8.20081354,8.73371626 8.20081354,8.88003338 L8.48555081,18.6485633 C8.49121278,18.7988537 8.54055631,18.9179288 8.63358142,19.0057886 C8.72660652,19.0936484 8.84945628,19.1375783 9.00213069,19.1375783 Z M11.6876904,19.1375783 C11.8451328,19.1375783 11.9717821,19.0922578 12.0676381,19.0016166 C12.1634942,18.9109755 12.2114223,18.7924964 12.2114223,18.6461793 L12.2114223,8.88003338 C12.2114223,8.73451092 12.1634942,8.61623047 12.0676381,8.52519202 C11.9717821,8.43415357 11.8451328,8.38863435 11.6876904,8.38863435 C11.5310427,8.38863435 11.4032015,8.43415357 11.3041668,8.52519202 C11.205132,8.61623047 11.1556147,8.73451092 11.1556147,8.88003338 L11.1556147,18.6461793 C11.1556147,18.7924964 11.205132,18.9109755 11.3041668,19.0016166 C11.4032015,19.0922578 11.5310427,19.1375783 11.6876904,19.1375783 Z M14.3635653,19.1387703 C14.516339,19.1387703 14.6392384,19.0948404 14.7322635,19.0069806 C14.8252886,18.9191208 14.8745825,18.802827 14.8801451,18.6580992 L15.1662234,8.88122537 C15.1662234,8.73490825 15.1194873,8.6166278 15.0260152,8.52638402 C14.9325431,8.43614023 14.8070859,8.39101833 14.6496435,8.39101833 C14.4993531,8.39101833 14.3772732,8.4345509 14.2834037,8.52161604 C14.1895343,8.60868118 14.1398183,8.7277563 14.1342556,8.87884138 L13.8483264,18.6485633 C13.8483264,18.7932911 13.8948389,18.9111742 13.987864,19.0022126 C14.0808891,19.0932511 14.2061229,19.1387703 14.3635653,19.1387703 Z" }) }));
1373
1380
  }
1374
1381
 
1375
- var styles$P = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh","zoom-in-text":"number-field-module-OlEoa"};
1382
+ var styles$Q = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh","zoom-in-text":"number-field-module-OlEoa"};
1376
1383
 
1377
1384
  /**
1378
1385
  * This component is used to create a number field.
@@ -1380,7 +1387,7 @@ var styles$P = {"field":"number-field-module-gmnog","button-input-container":"nu
1380
1387
  */
1381
1388
  function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions = { style: 'decimal', useGrouping: false }, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel = false, size = 'lg', value, withButtons, }) {
1382
1389
  const inputRef = useRef(null);
1383
- return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$P.field, styles$P[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$P['button-input-container'], children: [withButtons && (jsx(Button$1, { isDisabled: isDisabled,
1390
+ return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$Q.field, styles$Q[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$Q['button-input-container'], children: [withButtons && (jsx(Button$1, { isDisabled: isDisabled,
1384
1391
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
1385
1392
  // @ts-expect-error
1386
1393
  onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(StrokeTrashIcon, {}) : jsx(StrokeCollapseIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, maxLength: maxLength, onFocus: e => (e.target.selectionStart = e.target.value.length || 0), onKeyUp: e => onKeyUp?.(e), placeholder: placeholder, size: size }), withButtons && (jsx(Button$1, { isDisabled: isDisabled,
@@ -1393,7 +1400,7 @@ function SolidCartIcon(props) {
1393
1400
  return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M7.89619008,16.6656848 C9.33405626,16.6656848 10.4996925,17.831321 10.4996925,19.2690253 C10.4996925,20.7068915 9.33405626,21.8725278 7.89619008,21.8725278 C6.45832389,21.8725278 5.29268766,20.7068915 5.29268766,19.2690253 C5.29268766,17.831321 6.45832389,16.6656848 7.89619008,16.6656848 Z M16.8207199,16.6656848 C18.2585861,16.6656848 19.4242223,17.831321 19.4242223,19.2690253 C19.4242223,20.7068915 18.2585861,21.8725278 16.8207199,21.8725278 C15.3828537,21.8725278 14.2172175,20.7068915 14.2172175,19.2690253 C14.2172175,17.831321 15.3828537,16.6656848 16.8207199,16.6656848 Z M7.89619008,18.0995047 C7.25122196,18.0995047 6.72650762,18.6242191 6.72650762,19.2690253 C6.72650762,19.9139935 7.25122196,20.4387078 7.89619008,20.4387078 C8.54115819,20.4387078 9.06587253,19.9139935 9.06587253,19.2690253 C9.06587253,18.6242191 8.54115819,18.0995047 7.89619008,18.0995047 Z M16.8207199,18.0995047 C16.1757518,18.0995047 15.6510375,18.6242191 15.6510375,19.2690253 C15.6510375,19.9139935 16.1757518,20.4387078 16.8207199,20.4387078 C17.465688,20.4387078 17.9904024,19.9139935 17.9904024,19.2690253 C17.9904024,18.6242191 17.465688,18.0995047 16.8207199,18.0995047 Z M4.58909785,3 C4.6054446,3 4.6206584,3.00372253 4.63668145,3.00485547 C4.65869291,3.00631211 4.68038067,3.0079306 4.70174473,3.01132943 C4.72958275,3.0158612 4.75628783,3.02233516 4.78299291,3.02994206 C4.8001489,3.03479753 4.81698119,3.03949115 4.83365164,3.04564141 C4.8622989,3.05616159 4.88948953,3.06862396 4.91619461,3.08254297 L4.956495,3.10439258 C4.98287638,3.12025378 5.00763927,3.13789532 5.03175477,3.15699349 L5.06736154,3.18645 C5.08921115,3.20603373 5.10911857,3.22707409 5.1283786,3.2492474 C5.13986987,3.26251902 5.1511993,3.27562878 5.16171948,3.28970964 C5.17806623,3.31155925 5.19230894,3.33421811 5.2060661,3.35768621 C5.21626258,3.37500405 5.22597352,3.39216004 5.23455152,3.41028712 C5.24555725,3.43326967 5.25462079,3.45706147 5.26319878,3.48150066 C5.27032014,3.50205548 5.27711779,3.52244845 5.28245881,3.54381251 C5.28860907,3.56825171 5.29249345,3.59317645 5.29605412,3.61858673 C5.29799631,3.63299129 5.30252808,3.64642476 5.30382287,3.66115301 L5.510504,6.30738355 L21.2869744,6.30772748 C21.3139222,6.30835464 21.3370666,6.31256272 21.3603729,6.3151523 C21.3861069,6.31790373 21.4120027,6.31936037 21.4369275,6.32486324 C21.4591008,6.32923316 21.4726961,6.33603082 21.4875862,6.34056259 C21.5163953,6.34914058 21.5452044,6.35723303 21.5722332,6.36920985 C21.5918169,6.37778785 21.6092966,6.38911728 21.6275855,6.39931376 C21.6497588,6.41145243 21.6722559,6.42278186 21.6928107,6.43718642 C21.711747,6.45029618 21.7280937,6.46583368 21.7455734,6.48072379 C21.763215,6.49577574 21.7815039,6.51001845 21.7976888,6.52668889 C21.8132263,6.54287379 21.8261742,6.56067718 21.8400932,6.57815686 C21.8551452,6.59676949 21.8706827,6.61473473 21.8836306,6.634804 C21.8954456,6.65293108 21.9043473,6.67251481 21.9145437,6.69161299 C21.9258732,6.71330075 21.9381737,6.73434111 21.9473991,6.75716182 C21.9559771,6.77868773 21.9614799,6.80134658 21.9679539,6.82368174 C21.9744279,6.8456932 21.9820348,6.86705726 21.9864047,6.89003981 C21.9915839,6.91658304 21.9925549,6.94393552 21.994659,6.97128799 C21.9959538,6.98909138 22,7.00608552 22,7.0242126 C21.9988671,7.05496391 21.994659,7.07794646 21.9922312,7.10109086 C21.9894798,7.1269867 21.9880232,7.15320623 21.9825203,7.17813097 L20.5915903,13.2322533 L20.587706,13.2487619 C20.5797754,13.2835594 20.5681222,13.3164147 20.555498,13.3486227 C20.5524229,13.3567151 20.5499951,13.3651313 20.5465963,13.3730619 C20.5299259,13.4117438 20.5096948,13.4483216 20.4870359,13.4827955 C20.4797527,13.4938012 20.4710129,13.5031884 20.4632441,13.5137086 C20.445117,13.5381478 20.4265044,13.5619396 20.4056259,13.5836274 C20.3944583,13.5952805 20.3823196,13.605477 20.3705046,13.6163208 C20.3505972,13.6344479 20.3302043,13.6517658 20.3083546,13.6674651 C20.2941119,13.6778235 20.2795455,13.6872107 20.2646554,13.6964361 C20.2424821,13.7101932 20.2198233,13.7223319 20.1963552,13.7334995 L20.148286,13.7550254 C20.1214191,13.7655456 20.0935811,13.7734762 20.0654194,13.7807594 C20.0513385,13.7843201 20.037905,13.7888518 20.0235005,13.7916033 C19.9798012,13.8000194 19.9351309,13.8053604 19.8898132,13.8053604 L6.09623539,13.8051986 L6.20774933,15.2317353 L19.411064,15.2317353 C19.8069466,15.2317353 20.1278931,15.5528437 20.1278931,15.9487262 C20.1278931,16.3446088 19.8069466,16.6657172 19.411064,16.6657172 L5.54384488,16.6657172 C5.49593759,16.6657172 5.44932509,16.660538 5.40384553,16.6514744 C5.38863173,16.6483993 5.37471272,16.6425728 5.35998446,16.6386884 C5.33052795,16.6307578 5.30090959,16.6231509 5.27290972,16.6116596 C5.25543003,16.6043764 5.23940699,16.5945036 5.22257469,16.5859256 C5.19910659,16.5741106 5.17547665,16.5627812 5.15362704,16.5485385 C5.13711844,16.5376946 5.12255203,16.5249086 5.10701453,16.5127699 C5.08694526,16.4972324 5.06687599,16.4821804 5.04874891,16.4647007 C5.03434435,16.4509436 5.02204383,16.4357298 5.00893406,16.4208397 C4.99226362,16.4019033 4.97575503,16.3834526 4.96118862,16.3628977 C4.94937364,16.3463891 4.93966271,16.3285858 4.92930437,16.3111061 C4.91668015,16.2899039 4.90437963,16.2688635 4.8940213,16.2462046 C4.88511961,16.2267828 4.87832195,16.2065516 4.87103875,16.1861587 C4.86310815,16.163338 4.8553394,16.1406791 4.84967468,16.1168873 C4.84433367,16.0950377 4.84109669,16.0728644 4.83785971,16.0502055 L4.82992911,16.0045641 L3.92600265,4.43381996 L2.7169909,4.43381996 C2.32110834,4.43381996 2,4.11287347 2,3.7169909 C2,3.32094649 2.32110834,3 2.7169909,3 Z", fillRule: "evenodd" }) }));
1394
1401
  }
1395
1402
 
1396
- var styles$O = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
1403
+ var styles$P = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
1397
1404
 
1398
1405
  function AddToCartButton({ initialState = 'initial', isDisabled = false, onChange, quantity, }) {
1399
1406
  const [currentState, setState] = useState(initialState);
@@ -1481,7 +1488,7 @@ function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
1481
1488
  e.key === 'Enter' && onConfirm(ensureNumber(updatedQuantity));
1482
1489
  e.key === 'Escape' && onCancel();
1483
1490
  };
1484
- return (jsxs("div", { className: styles$O['manual-input-container'], children: [jsx("div", { className: styles$O['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity ? ensureNumber(quantity) : undefined, formatOptions: {
1491
+ return (jsxs("div", { className: styles$P['manual-input-container'], children: [jsx("div", { className: styles$P['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity ? ensureNumber(quantity) : undefined, formatOptions: {
1485
1492
  maximumFractionDigits: 0,
1486
1493
  style: 'decimal',
1487
1494
  useGrouping: false,
@@ -1531,12 +1538,12 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
1531
1538
  return (jsx(AddToCartButton, { isDisabled: isPendingDeleteCartLine || isLoadingCartLines || isPendingAddToCart, onChange: handleChange, quantity: quantity }));
1532
1539
  };
1533
1540
 
1534
- var styles$N = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
1541
+ var styles$O = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
1535
1542
 
1536
1543
  function Tag({ children }) {
1537
1544
  if (!children)
1538
1545
  return null;
1539
- return (jsxs("div", { className: styles$N.tag, children: [jsx("div", { className: styles$N.body, children: children }), jsx("svg", { className: styles$N.shape, height: "16", viewBox: "0 0 9 16", width: "9", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.92461763,0 L0,0 L0,16 L1.92461763,16 L6.4117887,16 L8.87489381,7.57121588 C9.23711515,6.3325062 8.79482383,4.99454094 7.78060408,4.2560794 L1.92461763,0 Z", fill: "currentColor" }) })] }));
1546
+ return (jsxs("div", { className: styles$O.tag, children: [jsx("div", { className: styles$O.body, children: children }), jsx("svg", { className: styles$O.shape, height: "16", viewBox: "0 0 9 16", width: "9", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.92461763,0 L0,0 L0,16 L1.92461763,16 L6.4117887,16 L8.87489381,7.57121588 C9.23711515,6.3325062 8.79482383,4.99454094 7.78060408,4.2560794 L1.92461763,0 Z", fill: "currentColor" }) })] }));
1540
1547
  }
1541
1548
 
1542
1549
  const IntlContext = createContext({
@@ -1572,7 +1579,7 @@ function useFormattedMessage() {
1572
1579
 
1573
1580
  const FormattedMessage = ({ fallbackValue, id, optional, replacementValues, }) => useFormattedMessage()(id, { fallbackValue, optional, replacementValues });
1574
1581
 
1575
- var styles$M = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","is-hidden":"product-price-module-V1NCf","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","vat":"product-price-module-96DoG"};
1582
+ var styles$N = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","is-hidden":"product-price-module-V1NCf","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","vat":"product-price-module-96DoG"};
1576
1583
 
1577
1584
  const formatPrice = (price) => new Intl.NumberFormat('en-US', {
1578
1585
  maximumFractionDigits: 2,
@@ -1585,22 +1592,22 @@ function ProductPrice({ className, isVatIncluded, originalPrice, price, }) {
1585
1592
  const priceWithCurrency = formatPrice(price);
1586
1593
  const [wholes, decimals] = priceWithCurrency.split('.');
1587
1594
  const showOriginalPrice = priceWithCurrency !== originalPriceWithCurrency;
1588
- return (jsxs("div", { className: clsx(className, styles$M['product-price']), children: [jsx("span", { className: clsx(styles$M['original-price'], {
1589
- [styles$M['is-hidden']]: !showOriginalPrice,
1590
- }), children: originalPriceWithCurrency }), jsxs("div", { className: styles$M['current-price-wrapper'], children: [jsxs("div", { className: styles$M['current-price'], children: [jsx("span", { className: styles$M.wholes, children: wholes }), jsx("span", { className: styles$M.dot, children: "." }), jsx("span", { className: styles$M.decimals, children: decimals })] }), jsx("span", { className: styles$M.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
1595
+ return (jsxs("div", { className: clsx(className, styles$N['product-price']), children: [jsx("span", { className: clsx(styles$N['original-price'], {
1596
+ [styles$N['is-hidden']]: !showOriginalPrice,
1597
+ }), children: originalPriceWithCurrency }), jsxs("div", { className: styles$N['current-price-wrapper'], children: [jsxs("div", { className: styles$N['current-price'], children: [jsx("span", { className: styles$N.wholes, children: wholes }), jsx("span", { className: styles$N.dot, children: "." }), jsx("span", { className: styles$N.decimals, children: decimals })] }), jsx("span", { className: styles$N.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
1591
1598
  }
1592
1599
 
1593
- var styles$L = {"product-sku":"product-sku-module-ITb8x"};
1600
+ var styles$M = {"product-sku":"product-sku-module-ITb8x"};
1594
1601
 
1595
1602
  function ProductSku({ sku }) {
1596
- return (jsx("p", { className: styles$L['product-sku'], "data-test-selector": "productNumber", children: sku }));
1603
+ return (jsx("p", { className: styles$M['product-sku'], "data-test-selector": "productNumber", children: sku }));
1597
1604
  }
1598
1605
 
1599
1606
  function isResponsiveImage(image) {
1600
1607
  return Boolean(image?.lg);
1601
1608
  }
1602
1609
 
1603
- var styles$K = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe","has-error":"image-module-LM93B","picture":"image-module-pNYjR"};
1610
+ var styles$L = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe","has-error":"image-module-LM93B","picture":"image-module-pNYjR"};
1604
1611
 
1605
1612
  function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/image/upload/v1716545808/images/product-card/fallback_p6ngjz.svg', fit = 'cover', height, image, loading = 'eager', title, width, }) {
1606
1613
  const [hasError, setHasError] = useState(false);
@@ -1624,26 +1631,26 @@ function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/
1624
1631
  }
1625
1632
  function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
1626
1633
  if (!image)
1627
- return (jsx("img", { className: clsx(styles$K.image, className, styles$K[fit], styles$K['has-error']), src: fallbackSrc, ...rest }));
1634
+ return (jsx("img", { className: clsx(styles$L.image, className, styles$L[fit], styles$L['has-error']), src: fallbackSrc, ...rest }));
1628
1635
  const srcSet = !hasError
1629
1636
  ? `${image[1]} 1x, ${image[2]} 2x, ${image[3]} 3x`
1630
1637
  : undefined;
1631
- return (jsx("img", { alt: image.altText, className: clsx(styles$K.image, className, styles$K[fit], {
1632
- [styles$K['has-error']]: hasError,
1638
+ return (jsx("img", { alt: image.altText, className: clsx(styles$L.image, className, styles$L[fit], {
1639
+ [styles$L['has-error']]: hasError,
1633
1640
  }), src: !hasError ? image[3] : fallbackSrc, srcSet: srcSet, ...rest }));
1634
1641
  }
1635
1642
  function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
1636
1643
  if (!image)
1637
- return (jsx("picture", { className: clsx(styles$K.picture, className), children: jsx("img", { className: clsx(styles$K[fit], styles$K['has-error']), src: fallbackSrc, ...rest }) }));
1638
- return (jsxs("picture", { className: clsx(styles$K.picture, className), children: [jsx("source", { media: "(max-width: 768px)", srcSet: `${image.sm[1]} 1x, ${image.sm[2]} 2x, ${image.sm[3]} 3x` }), jsx("source", { media: "(max-width: 1439px)", srcSet: `${image.md[1]} 1x, ${image.md[2]} 2x, ${image.md[3]} 3x` }), jsx("source", { media: "(min-width: 1440px)", srcSet: `${image.lg[1]} 1x, ${image.lg[2]} 2x, ${image.lg[3]} 3x` }), jsx("img", { className: clsx(styles$K[fit], {
1639
- [styles$K['has-error']]: hasError,
1644
+ return (jsx("picture", { className: clsx(styles$L.picture, className), children: jsx("img", { className: clsx(styles$L[fit], styles$L['has-error']), src: fallbackSrc, ...rest }) }));
1645
+ return (jsxs("picture", { className: clsx(styles$L.picture, className), children: [jsx("source", { media: "(max-width: 768px)", srcSet: `${image.sm[1]} 1x, ${image.sm[2]} 2x, ${image.sm[3]} 3x` }), jsx("source", { media: "(max-width: 1439px)", srcSet: `${image.md[1]} 1x, ${image.md[2]} 2x, ${image.md[3]} 3x` }), jsx("source", { media: "(min-width: 1440px)", srcSet: `${image.lg[1]} 1x, ${image.lg[2]} 2x, ${image.lg[3]} 3x` }), jsx("img", { className: clsx(styles$L[fit], {
1646
+ [styles$L['has-error']]: hasError,
1640
1647
  }), src: !hasError ? image.lg[3] : fallbackSrc, ...rest })] }));
1641
1648
  }
1642
1649
 
1643
- var styles$J = {"product-card-container":"product-card-module-LepTy","product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
1650
+ var styles$K = {"product-card-container":"product-card-module-LepTy","product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
1644
1651
 
1645
1652
  function ProductCard({ addToCartButton: AddToCartButton, areaSelected, favoriteButton: FavoriteButton, href, id, image, onClick, onMouseDown, onMouseMove, onPress, price, role, sku, tags, title, }) {
1646
- return (jsx("div", { className: styles$J['product-card-container'], children: jsxs(RouteLink, { "aria-selected": areaSelected, className: styles$J['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onPress: onPress, role: role, children: [jsx("div", { className: styles$J.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$J['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$J.content, children: [jsxs("div", { className: styles$J.top, children: [jsx("div", { className: styles$J.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$J.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$J.bottom, children: [jsx("div", { className: styles$J.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$J['add-to-cart-button'], children: AddToCartButton })] })] })] }) }));
1653
+ return (jsx("div", { className: styles$K['product-card-container'], children: jsxs(RouteLink, { "aria-selected": areaSelected, className: styles$K['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onPress: onPress, role: role, children: [jsx("div", { className: styles$K.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles$K['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$K.content, children: [jsxs("div", { className: styles$K.top, children: [jsx("div", { className: styles$K.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles$K.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$K.bottom, children: [jsx("div", { className: styles$K.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles$K['add-to-cart-button'], children: AddToCartButton })] })] })] }) }));
1647
1654
  }
1648
1655
 
1649
1656
  /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -2108,7 +2115,9 @@ function elementParents(el, selector) {
2108
2115
  const parents = []; // eslint-disable-line
2109
2116
  let parent = el.parentElement; // eslint-disable-line
2110
2117
  while (parent) {
2111
- {
2118
+ if (selector) {
2119
+ if (parent.matches(selector)) parents.push(parent);
2120
+ } else {
2112
2121
  parents.push(parent);
2113
2122
  }
2114
2123
  parent = parent.parentElement;
@@ -2131,6 +2140,490 @@ function elementOuterSize(el, size, includeMargins) {
2131
2140
  return el[size === 'width' ? 'offsetWidth' : 'offsetHeight'] + parseFloat(window.getComputedStyle(el, null).getPropertyValue(size === 'width' ? 'margin-right' : 'margin-top')) + parseFloat(window.getComputedStyle(el, null).getPropertyValue(size === 'width' ? 'margin-left' : 'margin-bottom'));
2132
2141
  }
2133
2142
  }
2143
+ function makeElementsArray(el) {
2144
+ return (Array.isArray(el) ? el : [el]).filter(e => !!e);
2145
+ }
2146
+
2147
+ function createElementIfNotDefined(swiper, originalParams, params, checkProps) {
2148
+ if (swiper.params.createElements) {
2149
+ Object.keys(checkProps).forEach(key => {
2150
+ if (!params[key] && params.auto === true) {
2151
+ let element = elementChildren(swiper.el, `.${checkProps[key]}`)[0];
2152
+ if (!element) {
2153
+ element = createElement('div', checkProps[key]);
2154
+ element.className = checkProps[key];
2155
+ swiper.el.append(element);
2156
+ }
2157
+ params[key] = element;
2158
+ originalParams[key] = element;
2159
+ }
2160
+ });
2161
+ }
2162
+ return params;
2163
+ }
2164
+
2165
+ function classesToSelector(classes) {
2166
+ if (classes === void 0) {
2167
+ classes = '';
2168
+ }
2169
+ return `.${classes.trim().replace(/([\.:!+\/])/g, '\\$1') // eslint-disable-line
2170
+ .replace(/ /g, '.')}`;
2171
+ }
2172
+
2173
+ function Pagination$1(_ref) {
2174
+ let {
2175
+ swiper,
2176
+ extendParams,
2177
+ on,
2178
+ emit
2179
+ } = _ref;
2180
+ const pfx = 'swiper-pagination';
2181
+ extendParams({
2182
+ pagination: {
2183
+ el: null,
2184
+ bulletElement: 'span',
2185
+ clickable: false,
2186
+ hideOnClick: false,
2187
+ renderBullet: null,
2188
+ renderProgressbar: null,
2189
+ renderFraction: null,
2190
+ renderCustom: null,
2191
+ progressbarOpposite: false,
2192
+ type: 'bullets',
2193
+ // 'bullets' or 'progressbar' or 'fraction' or 'custom'
2194
+ dynamicBullets: false,
2195
+ dynamicMainBullets: 1,
2196
+ formatFractionCurrent: number => number,
2197
+ formatFractionTotal: number => number,
2198
+ bulletClass: `${pfx}-bullet`,
2199
+ bulletActiveClass: `${pfx}-bullet-active`,
2200
+ modifierClass: `${pfx}-`,
2201
+ currentClass: `${pfx}-current`,
2202
+ totalClass: `${pfx}-total`,
2203
+ hiddenClass: `${pfx}-hidden`,
2204
+ progressbarFillClass: `${pfx}-progressbar-fill`,
2205
+ progressbarOppositeClass: `${pfx}-progressbar-opposite`,
2206
+ clickableClass: `${pfx}-clickable`,
2207
+ lockClass: `${pfx}-lock`,
2208
+ horizontalClass: `${pfx}-horizontal`,
2209
+ verticalClass: `${pfx}-vertical`,
2210
+ paginationDisabledClass: `${pfx}-disabled`
2211
+ }
2212
+ });
2213
+ swiper.pagination = {
2214
+ el: null,
2215
+ bullets: []
2216
+ };
2217
+ let bulletSize;
2218
+ let dynamicBulletIndex = 0;
2219
+ function isPaginationDisabled() {
2220
+ return !swiper.params.pagination.el || !swiper.pagination.el || Array.isArray(swiper.pagination.el) && swiper.pagination.el.length === 0;
2221
+ }
2222
+ function setSideBullets(bulletEl, position) {
2223
+ const {
2224
+ bulletActiveClass
2225
+ } = swiper.params.pagination;
2226
+ if (!bulletEl) return;
2227
+ bulletEl = bulletEl[`${position === 'prev' ? 'previous' : 'next'}ElementSibling`];
2228
+ if (bulletEl) {
2229
+ bulletEl.classList.add(`${bulletActiveClass}-${position}`);
2230
+ bulletEl = bulletEl[`${position === 'prev' ? 'previous' : 'next'}ElementSibling`];
2231
+ if (bulletEl) {
2232
+ bulletEl.classList.add(`${bulletActiveClass}-${position}-${position}`);
2233
+ }
2234
+ }
2235
+ }
2236
+ function getMoveDirection(prevIndex, nextIndex, length) {
2237
+ prevIndex = prevIndex % length;
2238
+ nextIndex = nextIndex % length;
2239
+ if (nextIndex === prevIndex + 1) {
2240
+ return 'next';
2241
+ } else if (nextIndex === prevIndex - 1) {
2242
+ return 'previous';
2243
+ }
2244
+ return;
2245
+ }
2246
+ function onBulletClick(e) {
2247
+ const bulletEl = e.target.closest(classesToSelector(swiper.params.pagination.bulletClass));
2248
+ if (!bulletEl) {
2249
+ return;
2250
+ }
2251
+ e.preventDefault();
2252
+ const index = elementIndex(bulletEl) * swiper.params.slidesPerGroup;
2253
+ if (swiper.params.loop) {
2254
+ if (swiper.realIndex === index) return;
2255
+ const moveDirection = getMoveDirection(swiper.realIndex, index, swiper.slides.length);
2256
+ if (moveDirection === 'next') {
2257
+ swiper.slideNext();
2258
+ } else if (moveDirection === 'previous') {
2259
+ swiper.slidePrev();
2260
+ } else {
2261
+ swiper.slideToLoop(index);
2262
+ }
2263
+ } else {
2264
+ swiper.slideTo(index);
2265
+ }
2266
+ }
2267
+ function update() {
2268
+ // Render || Update Pagination bullets/items
2269
+ const rtl = swiper.rtl;
2270
+ const params = swiper.params.pagination;
2271
+ if (isPaginationDisabled()) return;
2272
+ let el = swiper.pagination.el;
2273
+ el = makeElementsArray(el);
2274
+ // Current/Total
2275
+ let current;
2276
+ let previousIndex;
2277
+ const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.slides.length;
2278
+ const total = swiper.params.loop ? Math.ceil(slidesLength / swiper.params.slidesPerGroup) : swiper.snapGrid.length;
2279
+ if (swiper.params.loop) {
2280
+ previousIndex = swiper.previousRealIndex || 0;
2281
+ current = swiper.params.slidesPerGroup > 1 ? Math.floor(swiper.realIndex / swiper.params.slidesPerGroup) : swiper.realIndex;
2282
+ } else if (typeof swiper.snapIndex !== 'undefined') {
2283
+ current = swiper.snapIndex;
2284
+ previousIndex = swiper.previousSnapIndex;
2285
+ } else {
2286
+ previousIndex = swiper.previousIndex || 0;
2287
+ current = swiper.activeIndex || 0;
2288
+ }
2289
+ // Types
2290
+ if (params.type === 'bullets' && swiper.pagination.bullets && swiper.pagination.bullets.length > 0) {
2291
+ const bullets = swiper.pagination.bullets;
2292
+ let firstIndex;
2293
+ let lastIndex;
2294
+ let midIndex;
2295
+ if (params.dynamicBullets) {
2296
+ bulletSize = elementOuterSize(bullets[0], swiper.isHorizontal() ? 'width' : 'height');
2297
+ el.forEach(subEl => {
2298
+ subEl.style[swiper.isHorizontal() ? 'width' : 'height'] = `${bulletSize * (params.dynamicMainBullets + 4)}px`;
2299
+ });
2300
+ if (params.dynamicMainBullets > 1 && previousIndex !== undefined) {
2301
+ dynamicBulletIndex += current - (previousIndex || 0);
2302
+ if (dynamicBulletIndex > params.dynamicMainBullets - 1) {
2303
+ dynamicBulletIndex = params.dynamicMainBullets - 1;
2304
+ } else if (dynamicBulletIndex < 0) {
2305
+ dynamicBulletIndex = 0;
2306
+ }
2307
+ }
2308
+ firstIndex = Math.max(current - dynamicBulletIndex, 0);
2309
+ lastIndex = firstIndex + (Math.min(bullets.length, params.dynamicMainBullets) - 1);
2310
+ midIndex = (lastIndex + firstIndex) / 2;
2311
+ }
2312
+ bullets.forEach(bulletEl => {
2313
+ const classesToRemove = [...['', '-next', '-next-next', '-prev', '-prev-prev', '-main'].map(suffix => `${params.bulletActiveClass}${suffix}`)].map(s => typeof s === 'string' && s.includes(' ') ? s.split(' ') : s).flat();
2314
+ bulletEl.classList.remove(...classesToRemove);
2315
+ });
2316
+ if (el.length > 1) {
2317
+ bullets.forEach(bullet => {
2318
+ const bulletIndex = elementIndex(bullet);
2319
+ if (bulletIndex === current) {
2320
+ bullet.classList.add(...params.bulletActiveClass.split(' '));
2321
+ } else if (swiper.isElement) {
2322
+ bullet.setAttribute('part', 'bullet');
2323
+ }
2324
+ if (params.dynamicBullets) {
2325
+ if (bulletIndex >= firstIndex && bulletIndex <= lastIndex) {
2326
+ bullet.classList.add(...`${params.bulletActiveClass}-main`.split(' '));
2327
+ }
2328
+ if (bulletIndex === firstIndex) {
2329
+ setSideBullets(bullet, 'prev');
2330
+ }
2331
+ if (bulletIndex === lastIndex) {
2332
+ setSideBullets(bullet, 'next');
2333
+ }
2334
+ }
2335
+ });
2336
+ } else {
2337
+ const bullet = bullets[current];
2338
+ if (bullet) {
2339
+ bullet.classList.add(...params.bulletActiveClass.split(' '));
2340
+ }
2341
+ if (swiper.isElement) {
2342
+ bullets.forEach((bulletEl, bulletIndex) => {
2343
+ bulletEl.setAttribute('part', bulletIndex === current ? 'bullet-active' : 'bullet');
2344
+ });
2345
+ }
2346
+ if (params.dynamicBullets) {
2347
+ const firstDisplayedBullet = bullets[firstIndex];
2348
+ const lastDisplayedBullet = bullets[lastIndex];
2349
+ for (let i = firstIndex; i <= lastIndex; i += 1) {
2350
+ if (bullets[i]) {
2351
+ bullets[i].classList.add(...`${params.bulletActiveClass}-main`.split(' '));
2352
+ }
2353
+ }
2354
+ setSideBullets(firstDisplayedBullet, 'prev');
2355
+ setSideBullets(lastDisplayedBullet, 'next');
2356
+ }
2357
+ }
2358
+ if (params.dynamicBullets) {
2359
+ const dynamicBulletsLength = Math.min(bullets.length, params.dynamicMainBullets + 4);
2360
+ const bulletsOffset = (bulletSize * dynamicBulletsLength - bulletSize) / 2 - midIndex * bulletSize;
2361
+ const offsetProp = rtl ? 'right' : 'left';
2362
+ bullets.forEach(bullet => {
2363
+ bullet.style[swiper.isHorizontal() ? offsetProp : 'top'] = `${bulletsOffset}px`;
2364
+ });
2365
+ }
2366
+ }
2367
+ el.forEach((subEl, subElIndex) => {
2368
+ if (params.type === 'fraction') {
2369
+ subEl.querySelectorAll(classesToSelector(params.currentClass)).forEach(fractionEl => {
2370
+ fractionEl.textContent = params.formatFractionCurrent(current + 1);
2371
+ });
2372
+ subEl.querySelectorAll(classesToSelector(params.totalClass)).forEach(totalEl => {
2373
+ totalEl.textContent = params.formatFractionTotal(total);
2374
+ });
2375
+ }
2376
+ if (params.type === 'progressbar') {
2377
+ let progressbarDirection;
2378
+ if (params.progressbarOpposite) {
2379
+ progressbarDirection = swiper.isHorizontal() ? 'vertical' : 'horizontal';
2380
+ } else {
2381
+ progressbarDirection = swiper.isHorizontal() ? 'horizontal' : 'vertical';
2382
+ }
2383
+ const scale = (current + 1) / total;
2384
+ let scaleX = 1;
2385
+ let scaleY = 1;
2386
+ if (progressbarDirection === 'horizontal') {
2387
+ scaleX = scale;
2388
+ } else {
2389
+ scaleY = scale;
2390
+ }
2391
+ subEl.querySelectorAll(classesToSelector(params.progressbarFillClass)).forEach(progressEl => {
2392
+ progressEl.style.transform = `translate3d(0,0,0) scaleX(${scaleX}) scaleY(${scaleY})`;
2393
+ progressEl.style.transitionDuration = `${swiper.params.speed}ms`;
2394
+ });
2395
+ }
2396
+ if (params.type === 'custom' && params.renderCustom) {
2397
+ subEl.innerHTML = params.renderCustom(swiper, current + 1, total);
2398
+ if (subElIndex === 0) emit('paginationRender', subEl);
2399
+ } else {
2400
+ if (subElIndex === 0) emit('paginationRender', subEl);
2401
+ emit('paginationUpdate', subEl);
2402
+ }
2403
+ if (swiper.params.watchOverflow && swiper.enabled) {
2404
+ subEl.classList[swiper.isLocked ? 'add' : 'remove'](params.lockClass);
2405
+ }
2406
+ });
2407
+ }
2408
+ function render() {
2409
+ // Render Container
2410
+ const params = swiper.params.pagination;
2411
+ if (isPaginationDisabled()) return;
2412
+ const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.grid && swiper.params.grid.rows > 1 ? swiper.slides.length / Math.ceil(swiper.params.grid.rows) : swiper.slides.length;
2413
+ let el = swiper.pagination.el;
2414
+ el = makeElementsArray(el);
2415
+ let paginationHTML = '';
2416
+ if (params.type === 'bullets') {
2417
+ let numberOfBullets = swiper.params.loop ? Math.ceil(slidesLength / swiper.params.slidesPerGroup) : swiper.snapGrid.length;
2418
+ if (swiper.params.freeMode && swiper.params.freeMode.enabled && numberOfBullets > slidesLength) {
2419
+ numberOfBullets = slidesLength;
2420
+ }
2421
+ for (let i = 0; i < numberOfBullets; i += 1) {
2422
+ if (params.renderBullet) {
2423
+ paginationHTML += params.renderBullet.call(swiper, i, params.bulletClass);
2424
+ } else {
2425
+ // prettier-ignore
2426
+ paginationHTML += `<${params.bulletElement} ${swiper.isElement ? 'part="bullet"' : ''} class="${params.bulletClass}"></${params.bulletElement}>`;
2427
+ }
2428
+ }
2429
+ }
2430
+ if (params.type === 'fraction') {
2431
+ if (params.renderFraction) {
2432
+ paginationHTML = params.renderFraction.call(swiper, params.currentClass, params.totalClass);
2433
+ } else {
2434
+ paginationHTML = `<span class="${params.currentClass}"></span>` + ' / ' + `<span class="${params.totalClass}"></span>`;
2435
+ }
2436
+ }
2437
+ if (params.type === 'progressbar') {
2438
+ if (params.renderProgressbar) {
2439
+ paginationHTML = params.renderProgressbar.call(swiper, params.progressbarFillClass);
2440
+ } else {
2441
+ paginationHTML = `<span class="${params.progressbarFillClass}"></span>`;
2442
+ }
2443
+ }
2444
+ swiper.pagination.bullets = [];
2445
+ el.forEach(subEl => {
2446
+ if (params.type !== 'custom') {
2447
+ subEl.innerHTML = paginationHTML || '';
2448
+ }
2449
+ if (params.type === 'bullets') {
2450
+ swiper.pagination.bullets.push(...subEl.querySelectorAll(classesToSelector(params.bulletClass)));
2451
+ }
2452
+ });
2453
+ if (params.type !== 'custom') {
2454
+ emit('paginationRender', el[0]);
2455
+ }
2456
+ }
2457
+ function init() {
2458
+ swiper.params.pagination = createElementIfNotDefined(swiper, swiper.originalParams.pagination, swiper.params.pagination, {
2459
+ el: 'swiper-pagination'
2460
+ });
2461
+ const params = swiper.params.pagination;
2462
+ if (!params.el) return;
2463
+ let el;
2464
+ if (typeof params.el === 'string' && swiper.isElement) {
2465
+ el = swiper.el.querySelector(params.el);
2466
+ }
2467
+ if (!el && typeof params.el === 'string') {
2468
+ el = [...document.querySelectorAll(params.el)];
2469
+ }
2470
+ if (!el) {
2471
+ el = params.el;
2472
+ }
2473
+ if (!el || el.length === 0) return;
2474
+ if (swiper.params.uniqueNavElements && typeof params.el === 'string' && Array.isArray(el) && el.length > 1) {
2475
+ el = [...swiper.el.querySelectorAll(params.el)];
2476
+ // check if it belongs to another nested Swiper
2477
+ if (el.length > 1) {
2478
+ el = el.filter(subEl => {
2479
+ if (elementParents(subEl, '.swiper')[0] !== swiper.el) return false;
2480
+ return true;
2481
+ })[0];
2482
+ }
2483
+ }
2484
+ if (Array.isArray(el) && el.length === 1) el = el[0];
2485
+ Object.assign(swiper.pagination, {
2486
+ el
2487
+ });
2488
+ el = makeElementsArray(el);
2489
+ el.forEach(subEl => {
2490
+ if (params.type === 'bullets' && params.clickable) {
2491
+ subEl.classList.add(...(params.clickableClass || '').split(' '));
2492
+ }
2493
+ subEl.classList.add(params.modifierClass + params.type);
2494
+ subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
2495
+ if (params.type === 'bullets' && params.dynamicBullets) {
2496
+ subEl.classList.add(`${params.modifierClass}${params.type}-dynamic`);
2497
+ dynamicBulletIndex = 0;
2498
+ if (params.dynamicMainBullets < 1) {
2499
+ params.dynamicMainBullets = 1;
2500
+ }
2501
+ }
2502
+ if (params.type === 'progressbar' && params.progressbarOpposite) {
2503
+ subEl.classList.add(params.progressbarOppositeClass);
2504
+ }
2505
+ if (params.clickable) {
2506
+ subEl.addEventListener('click', onBulletClick);
2507
+ }
2508
+ if (!swiper.enabled) {
2509
+ subEl.classList.add(params.lockClass);
2510
+ }
2511
+ });
2512
+ }
2513
+ function destroy() {
2514
+ const params = swiper.params.pagination;
2515
+ if (isPaginationDisabled()) return;
2516
+ let el = swiper.pagination.el;
2517
+ if (el) {
2518
+ el = makeElementsArray(el);
2519
+ el.forEach(subEl => {
2520
+ subEl.classList.remove(params.hiddenClass);
2521
+ subEl.classList.remove(params.modifierClass + params.type);
2522
+ subEl.classList.remove(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
2523
+ if (params.clickable) {
2524
+ subEl.classList.remove(...(params.clickableClass || '').split(' '));
2525
+ subEl.removeEventListener('click', onBulletClick);
2526
+ }
2527
+ });
2528
+ }
2529
+ if (swiper.pagination.bullets) swiper.pagination.bullets.forEach(subEl => subEl.classList.remove(...params.bulletActiveClass.split(' ')));
2530
+ }
2531
+ on('changeDirection', () => {
2532
+ if (!swiper.pagination || !swiper.pagination.el) return;
2533
+ const params = swiper.params.pagination;
2534
+ let {
2535
+ el
2536
+ } = swiper.pagination;
2537
+ el = makeElementsArray(el);
2538
+ el.forEach(subEl => {
2539
+ subEl.classList.remove(params.horizontalClass, params.verticalClass);
2540
+ subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
2541
+ });
2542
+ });
2543
+ on('init', () => {
2544
+ if (swiper.params.pagination.enabled === false) {
2545
+ // eslint-disable-next-line
2546
+ disable();
2547
+ } else {
2548
+ init();
2549
+ render();
2550
+ update();
2551
+ }
2552
+ });
2553
+ on('activeIndexChange', () => {
2554
+ if (typeof swiper.snapIndex === 'undefined') {
2555
+ update();
2556
+ }
2557
+ });
2558
+ on('snapIndexChange', () => {
2559
+ update();
2560
+ });
2561
+ on('snapGridLengthChange', () => {
2562
+ render();
2563
+ update();
2564
+ });
2565
+ on('destroy', () => {
2566
+ destroy();
2567
+ });
2568
+ on('enable disable', () => {
2569
+ let {
2570
+ el
2571
+ } = swiper.pagination;
2572
+ if (el) {
2573
+ el = makeElementsArray(el);
2574
+ el.forEach(subEl => subEl.classList[swiper.enabled ? 'remove' : 'add'](swiper.params.pagination.lockClass));
2575
+ }
2576
+ });
2577
+ on('lock unlock', () => {
2578
+ update();
2579
+ });
2580
+ on('click', (_s, e) => {
2581
+ const targetEl = e.target;
2582
+ const el = makeElementsArray(swiper.pagination.el);
2583
+ if (swiper.params.pagination.el && swiper.params.pagination.hideOnClick && el && el.length > 0 && !targetEl.classList.contains(swiper.params.pagination.bulletClass)) {
2584
+ if (swiper.navigation && (swiper.navigation.nextEl && targetEl === swiper.navigation.nextEl || swiper.navigation.prevEl && targetEl === swiper.navigation.prevEl)) return;
2585
+ const isHidden = el[0].classList.contains(swiper.params.pagination.hiddenClass);
2586
+ if (isHidden === true) {
2587
+ emit('paginationShow');
2588
+ } else {
2589
+ emit('paginationHide');
2590
+ }
2591
+ el.forEach(subEl => subEl.classList.toggle(swiper.params.pagination.hiddenClass));
2592
+ }
2593
+ });
2594
+ const enable = () => {
2595
+ swiper.el.classList.remove(swiper.params.pagination.paginationDisabledClass);
2596
+ let {
2597
+ el
2598
+ } = swiper.pagination;
2599
+ if (el) {
2600
+ el = makeElementsArray(el);
2601
+ el.forEach(subEl => subEl.classList.remove(swiper.params.pagination.paginationDisabledClass));
2602
+ }
2603
+ init();
2604
+ render();
2605
+ update();
2606
+ };
2607
+ const disable = () => {
2608
+ swiper.el.classList.add(swiper.params.pagination.paginationDisabledClass);
2609
+ let {
2610
+ el
2611
+ } = swiper.pagination;
2612
+ if (el) {
2613
+ el = makeElementsArray(el);
2614
+ el.forEach(subEl => subEl.classList.add(swiper.params.pagination.paginationDisabledClass));
2615
+ }
2616
+ destroy();
2617
+ };
2618
+ Object.assign(swiper.pagination, {
2619
+ enable,
2620
+ disable,
2621
+ render,
2622
+ update,
2623
+ init,
2624
+ destroy
2625
+ });
2626
+ }
2134
2627
 
2135
2628
  function freeMode(_ref) {
2136
2629
  let {
@@ -7019,7 +7512,7 @@ function GlyphsArrowBoldCapsLeftIcon(props) {
7019
7512
  return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "11", viewBox: "0 0 11 11", width: "11", children: jsx("path", { d: "M2.31124163,11 C2.06716529,11 1.91839241,10.7730596 2.04771379,10.5980857 L6.08820761,5.13116556 C6.42092595,4.68081431 6.37243043,4.10595375 5.96732409,3.70073526 L2.70240329,0.432177991 C2.53178078,0.261409485 2.67540212,0 2.93972934,0 L5.48361239,0 C5.57518542,0 5.6619622,0.0340936243 5.72102726,0.0931942463 L8.14882304,2.52367916 C9.1607451,3.53657521 9.28198389,4.9729381 8.45036569,6.09787751 L4.91836426,10.876542 C4.86160851,10.9533653 4.7620417,11 4.65492523,11 L2.31124163,11 Z", fillRule: "evenodd", transform: "matrix(-1 0 0 1 11 0)" }) }));
7020
7513
  }
7021
7514
 
7022
- var styles$I = {"carousel":"carousel-module-ealh-","swiper":"carousel-module-IftbN","is-ready":"carousel-module-RCpfc","has-overflow":"carousel-module-tPg7k","slide":"carousel-module-bUMlb","navigation-button":"carousel-module-kcqEE","is-locked":"carousel-module-uCrOA","navigation-button-next":"carousel-module-T7bTr","is-dragging":"carousel-module-34OWD","navigation-button-prev":"carousel-module-984Rr","navigation-buttons":"carousel-module-k7Z4S","navigation-button-wrapper":"carousel-module-Hi-0z","top":"carousel-module-nL-O8","center":"carousel-module-5SGYn"};
7515
+ var styles$J = {"carousel":"carousel-module-ealh-","swiper":"carousel-module-IftbN","is-ready":"carousel-module-RCpfc","has-overflow":"carousel-module-tPg7k","slide":"carousel-module-bUMlb","navigation-button":"carousel-module-kcqEE","is-locked":"carousel-module-uCrOA","navigation-button-next":"carousel-module-T7bTr","is-dragging":"carousel-module-34OWD","navigation-button-prev":"carousel-module-984Rr","navigation-buttons":"carousel-module-k7Z4S","navigation-button-wrapper":"carousel-module-Hi-0z","top":"carousel-module-nL-O8","center":"carousel-module-5SGYn"};
7023
7516
 
7024
7517
  function CarouselNavigationButton({ direction, isDisabled = false, }) {
7025
7518
  const swiper = useSwiper();
@@ -7034,8 +7527,8 @@ function CarouselNavigationButton({ direction, isDisabled = false, }) {
7034
7527
  swiper.slideTo(swiper.activeIndex - slidesPerView);
7035
7528
  }
7036
7529
  }
7037
- return (jsx(Button$1, { className: clsx(styles$I['navigation-button'], {
7038
- [styles$I['is-locked']]: swiper.isLocked,
7530
+ return (jsx(Button$1, { className: clsx(styles$J['navigation-button'], {
7531
+ [styles$J['is-locked']]: swiper.isLocked,
7039
7532
  }), isDisabled: isDisabled, onPress: handleNavigation, children: direction === 'previous' ? (jsx(GlyphsArrowBoldCapsLeftIcon, {})) : (jsx(GlyphsArrowBoldCapsRightIcon, {})) }));
7040
7533
  }
7041
7534
 
@@ -7065,31 +7558,31 @@ function Carousel({ breakpoints: _breakpoints, className, hasNavigation = true,
7065
7558
  }
7066
7559
  if (slides.length === 0)
7067
7560
  return null;
7068
- return (jsx("div", { className: clsx(styles$I.carousel, className), style: spaceBetween !== undefined
7561
+ return (jsx("div", { className: clsx(styles$J.carousel, className), style: spaceBetween !== undefined
7069
7562
  ? { '--column-gap': `${spaceBetween}px` }
7070
- : undefined, children: jsxs(Swiper, { breakpoints: _breakpoints, className: clsx(styles$I.swiper, {
7071
- [styles$I['is-dragging']]: isDragging,
7072
- [styles$I['has-overflow']]: hasOverflow,
7073
- [styles$I['is-ready']]: isReady,
7563
+ : undefined, children: jsxs(Swiper, { breakpoints: _breakpoints, className: clsx(styles$J.swiper, {
7564
+ [styles$J['is-dragging']]: isDragging,
7565
+ [styles$J['has-overflow']]: hasOverflow,
7566
+ [styles$J['is-ready']]: isReady,
7074
7567
  }), freeMode: {
7075
7568
  enabled: true,
7076
7569
  sticky: true,
7077
7570
  }, modules: [freeMode], onReachBeginning: () => setIsBeginning(true), onReachEnd: () => setIsEnd(true), onResize: swiper => handleSlideChange(swiper), onSlideChange: swiper => handleSlideChange(swiper), onSliderMove: () => setIsDragging(true), onSlidesUpdated: () => {
7078
7571
  if (!isReady)
7079
7572
  setIsReady(true);
7080
- }, onSwiper: swiper => handleSlideChange(swiper), onTouchEnd: () => setIsDragging(false), onUpdate: swiper => handleSlideChange(swiper), slidesPerGroupAuto: false, slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: [slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles$I.slide, slideClasses), children: slide }, index))), hasNavigation && isLocked === false && (jsxs("div", { className: clsx(styles$I['navigation-buttons'], styles$I[navigationButtonsPosition]), children: [jsx("div", { className: clsx(styles$I['navigation-button-wrapper'], styles$I['navigation-button-prev']), children: jsx(CarouselNavigationButton, { direction: "previous", isDisabled: isBeginning }) }), jsx("div", { className: clsx(styles$I['navigation-button-wrapper'], styles$I['navigation-button-next']), children: jsx(CarouselNavigationButton, { direction: "next", isDisabled: isEnd }) })] }))] }) }));
7573
+ }, onSwiper: swiper => handleSlideChange(swiper), onTouchEnd: () => setIsDragging(false), onUpdate: swiper => handleSlideChange(swiper), slidesPerGroupAuto: false, slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: [slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles$J.slide, slideClasses), children: slide }, index))), hasNavigation && isLocked === false && (jsxs("div", { className: clsx(styles$J['navigation-buttons'], styles$J[navigationButtonsPosition]), children: [jsx("div", { className: clsx(styles$J['navigation-button-wrapper'], styles$J['navigation-button-prev']), children: jsx(CarouselNavigationButton, { direction: "previous", isDisabled: isBeginning }) }), jsx("div", { className: clsx(styles$J['navigation-button-wrapper'], styles$J['navigation-button-next']), children: jsx(CarouselNavigationButton, { direction: "next", isDisabled: isEnd }) })] }))] }) }));
7081
7574
  }
7082
7575
 
7083
- var styles$H = {"slide":"category-carousel-module-muLq-"};
7576
+ var styles$I = {"slide":"category-carousel-module-muLq-"};
7084
7577
 
7085
7578
  function CategoryCarousel({ categoryCards }) {
7086
- return jsx(Carousel, { slideClasses: styles$H.slide, slides: categoryCards });
7579
+ return jsx(Carousel, { slideClasses: styles$I.slide, slides: categoryCards });
7087
7580
  }
7088
7581
 
7089
- var styles$G = {"accordion":"accordion-module-9WvAH","indented":"accordion-module-6CcEH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","border-type-bottom":"accordion-module-oTdZK","border-type-top":"accordion-module-0mrLq","border-type-middle":"accordion-module-aAr-R","is-open":"accordion-module-W0F1z","border-type-middle-accentuated":"accordion-module-OB98a"};
7582
+ var styles$H = {"accordion":"accordion-module-9WvAH","indented":"accordion-module-6CcEH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","border-type-bottom":"accordion-module-oTdZK","border-type-top":"accordion-module-0mrLq","border-type-middle":"accordion-module-aAr-R","is-open":"accordion-module-W0F1z","border-type-middle-accentuated":"accordion-module-OB98a"};
7090
7583
 
7091
7584
  function Accordion({ borderType = 'bottom', children, color = 'black', hasLineSeparator = true, indented, size = 'md', }) {
7092
- return (jsx("div", { className: clsx({ [styles$G.indented]: indented }, styles$G.accordion, styles$G[color], styles$G[size], hasLineSeparator && styles$G['with-seperators']), children: Boolean(children) &&
7585
+ return (jsx("div", { className: clsx({ [styles$H.indented]: indented }, styles$H.accordion, styles$H[color], styles$H[size], hasLineSeparator && styles$H['with-seperators']), children: Boolean(children) &&
7093
7586
  Children.map(children, child => {
7094
7587
  if (!child)
7095
7588
  return null;
@@ -7123,7 +7616,7 @@ function useResizeObserver(resizeCallback) {
7123
7616
  };
7124
7617
  }
7125
7618
 
7126
- var styles$F = {"show-all":"show-all-module-BDp21","panel":"show-all-module-bEdda","content":"show-all-module-RF--F","has-transparency":"show-all-module-30y7l","button":"show-all-module-58e7Q","icon":"show-all-module-fqncI","is-open":"show-all-module-hQeGI","content-fits":"show-all-module-OhPfm"};
7619
+ var styles$G = {"show-all":"show-all-module-BDp21","panel":"show-all-module-bEdda","content":"show-all-module-RF--F","has-transparency":"show-all-module-30y7l","button":"show-all-module-58e7Q","icon":"show-all-module-fqncI","is-open":"show-all-module-hQeGI","content-fits":"show-all-module-OhPfm"};
7127
7620
 
7128
7621
  function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialIsOpen = false, isOpen: isControlledOpen, onToggle, }) {
7129
7622
  const isControlled = isControlledOpen !== undefined && onToggle !== undefined;
@@ -7134,19 +7627,19 @@ function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialI
7134
7627
  const { ref } = useResizeObserver(size => {
7135
7628
  setContentFits((size.height || 0) <= initialHeight);
7136
7629
  });
7137
- return (jsxs("div", { ref: showAllRef, className: clsx(styles$F['show-all'], {
7138
- [styles$F['content-fits']]: contentFits,
7139
- [styles$F['is-open']]: isReallyOpen,
7140
- }), style: { '--initital-height': `${initialHeight}px` }, children: [jsx("div", { className: styles$F.panel, children: jsx("div", { className: clsx(styles$F.content, {
7141
- [styles$F['has-transparency']]: hasTransparency,
7142
- }), children: jsx("div", { ref: ref, "aria-hidden": true, style: { display: 'block' }, children: children }) }) }), !contentFits && (jsxs(RouteLink, { className: styles$F.button, color: "secondary", onPress: () => {
7630
+ return (jsxs("div", { ref: showAllRef, className: clsx(styles$G['show-all'], {
7631
+ [styles$G['content-fits']]: contentFits,
7632
+ [styles$G['is-open']]: isReallyOpen,
7633
+ }), style: { '--initital-height': `${initialHeight}px` }, children: [jsx("div", { className: styles$G.panel, children: jsx("div", { className: clsx(styles$G.content, {
7634
+ [styles$G['has-transparency']]: hasTransparency,
7635
+ }), children: jsx("div", { ref: ref, "aria-hidden": true, style: { display: 'block' }, children: children }) }) }), !contentFits && (jsxs(RouteLink, { className: styles$G.button, color: "secondary", onPress: () => {
7143
7636
  if (isControlled)
7144
7637
  return onToggle(!isControlled);
7145
7638
  toggle();
7146
- }, children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles$F.icon }), isReallyOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] }))] }));
7639
+ }, children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles$G.icon }), isReallyOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] }))] }));
7147
7640
  }
7148
7641
 
7149
- var styles$E = {"multi-select":"multi-select-module-DC7Ix","filter-item":"multi-select-module-OW-NK"};
7642
+ var styles$F = {"multi-select":"multi-select-module-DC7Ix","filter-item":"multi-select-module-OW-NK"};
7150
7643
 
7151
7644
  function MultiSelect({ amountShown = 3, onChange, options, render, }) {
7152
7645
  const shownOptions = options.slice(0, amountShown);
@@ -7157,28 +7650,28 @@ function MultiSelect({ amountShown = 3, onChange, options, render, }) {
7157
7650
  options.filter(option => option.isSelected).length === 0) {
7158
7651
  return null;
7159
7652
  }
7160
- return (jsxs("div", { className: styles$E['multi-select'], children: [jsx("div", { className: styles$E['filter-items'], children: shownOptions
7653
+ return (jsxs("div", { className: styles$F['multi-select'], children: [jsx("div", { className: styles$F['filter-items'], children: shownOptions
7161
7654
  .concat(isOpen ? [] : hiddenSelectedOptions)
7162
- .map(option => (jsxs("div", { className: styles$E['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }), hiddenOptions.length > 0 && (jsx(ShowAll, { hasTransparency: false, isOpen: isOpen, onToggle: toggle, children: jsx("div", { className: clsx(styles$E['filter-items'], styles$E['hidden']), children: hiddenOptions.map(option => (jsxs("div", { className: styles$E['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }) }))] }));
7655
+ .map(option => (jsxs("div", { className: styles$F['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }), hiddenOptions.length > 0 && (jsx(ShowAll, { hasTransparency: false, isOpen: isOpen, onToggle: toggle, children: jsx("div", { className: clsx(styles$F['filter-items'], styles$F['hidden']), children: hiddenOptions.map(option => (jsxs("div", { className: styles$F['filter-item'], children: [render({ onChange: () => onChange(option), option }), jsxs("span", { children: ["(", option.amount, ")"] })] }, option.value))) }) }))] }));
7163
7656
  }
7164
7657
 
7165
- var styles$D = {"checkbox":"checkbox-module-YNVdd","box":"checkbox-module-UKoyf","checkmark":"checkbox-module-pHIwh","focus":"checkbox-module-v23jy","active":"checkbox-module-7UG-b","color-checkbox":"checkbox-module-nEhvW"};
7658
+ var styles$E = {"checkbox":"checkbox-module-YNVdd","box":"checkbox-module-UKoyf","checkmark":"checkbox-module-pHIwh","focus":"checkbox-module-v23jy","active":"checkbox-module-7UG-b","color-checkbox":"checkbox-module-nEhvW"};
7166
7659
 
7167
7660
  function Checkbox({ _pseudo = 'none', children, className, isDisabled, isSelected, onChange, value, }) {
7168
- return (jsxs(Checkbox$1, { className: clsx(className, styles$D.checkbox, styles$D[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$D.box, children: jsx("svg", { "aria-hidden": "true", className: styles$D.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
7661
+ return (jsxs(Checkbox$1, { className: clsx(className, styles$E.checkbox, styles$E[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$E.box, children: jsx("svg", { "aria-hidden": "true", className: styles$E.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
7169
7662
  }
7170
7663
 
7171
7664
  function ColorCheckbox({ _pseudo = 'none', children, className, color, isDisabled, isSelected, onChange, value, }) {
7172
- return (jsxs(Checkbox$1, { className: clsx(className, styles$D.checkbox, styles$D['color-checkbox'], styles$D[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
7665
+ return (jsxs(Checkbox$1, { className: clsx(className, styles$E.checkbox, styles$E['color-checkbox'], styles$E[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
7173
7666
  '--selected-color': color,
7174
- }, value: value, children: [jsx("div", { className: styles$D.box }), children] }));
7667
+ }, value: value, children: [jsx("div", { className: styles$E.box }), children] }));
7175
7668
  }
7176
7669
 
7177
7670
  function StrokeCheckmarkIcon(props) {
7178
7671
  return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M10.8641425,17 C10.6636971,17 10.4855234,16.9548533 10.3296214,16.8645598 C10.1737194,16.7742664 10.0252413,16.6388262 9.88418708,16.4582393 L6.27839644,12.2189616 C6.09279881,11.9857035 6,11.744921 6,11.496614 C6,11.2332581 6.08723088,11.0094056 6.26169265,10.8250564 C6.43615442,10.6407073 6.65330364,10.5485327 6.91314031,10.5485327 C7.06904232,10.5485327 7.21195249,10.5823928 7.34187082,10.6501129 C7.47178916,10.717833 7.59985152,10.8382242 7.72605791,11.0112867 L10.8195991,14.7200903 L16.2405345,6.53047404 C16.4558278,6.17682468 16.7230883,6 17.0423163,6 C17.2873051,6 17.5081663,6.08088789 17.7048998,6.24266366 C17.9016333,6.40443943 18,6.61700527 18,6.88036117 C18,7.00075245 17.9721604,7.12302483 17.9164811,7.24717833 C17.8608018,7.37133183 17.7958426,7.48984199 17.7216036,7.6027088 L11.7884187,16.4469526 C11.5582777,16.8156509 11.2501856,17 10.8641425,17 Z", fillRule: "evenodd" }) }));
7179
7672
  }
7180
7673
 
7181
- var styles$C = {"select":"select-module-ui-Wc","sm":"select-module-44a1l","md":"select-module-QUm-8","solid":"select-module-IRd4F","button":"select-module-aMQIQ","chevron":"select-module-00uRU","focus":"select-module-XMc0P","popover":"select-module-z8cWq","listbox":"select-module-S21ba","header":"select-module-4Bm2j","item":"select-module-LgEJO","check":"select-module-lQFw3"};
7674
+ var styles$D = {"select":"select-module-ui-Wc","sm":"select-module-44a1l","md":"select-module-QUm-8","solid":"select-module-IRd4F","button":"select-module-aMQIQ","chevron":"select-module-00uRU","focus":"select-module-XMc0P","popover":"select-module-z8cWq","listbox":"select-module-S21ba","header":"select-module-4Bm2j","item":"select-module-LgEJO","check":"select-module-lQFw3"};
7182
7675
 
7183
7676
  function Select({ isDisabled = false, label, onChange, options, placeholder, selectedOption, showLabel = true, size = 'md', variant = 'outline', }) {
7184
7677
  const selectRef = useRef(null);
@@ -7195,12 +7688,12 @@ function Select({ isDisabled = false, label, onChange, options, placeholder, sel
7195
7688
  window.addEventListener('resize', updateWidth);
7196
7689
  return () => window.removeEventListener('resize', updateWidth);
7197
7690
  }, []);
7198
- return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$C.select, styles$C[size], styles$C[variant]), isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$C.button, children: [jsx(SelectValue, {}), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles$C.chevron })] }), jsx(Popover, { ref: ref =>
7691
+ return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles$D.select, styles$D[size], styles$D[variant]), isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$D.button, children: [jsx(SelectValue, {}), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles$D.chevron })] }), jsx(Popover, { ref: ref =>
7199
7692
  // Workaround for react/react-aria #1513
7200
- ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$C.popover, styles$C[variant]), placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$C.listbox, children: jsxs(Section, { children: [jsx(Header, { className: styles$C.header, children: placeholder || label }), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$C.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles$C.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
7693
+ ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles$D.popover, styles$D[variant]), placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$D.listbox, children: jsxs(Section, { children: [jsx(Header, { className: styles$D.header, children: placeholder || label }), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$D.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles$D.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
7201
7694
  }
7202
7695
 
7203
- var styles$B = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
7696
+ var styles$C = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
7204
7697
 
7205
7698
  /**
7206
7699
  * This component is used to create a textarea that can grow as the user types.
@@ -7235,7 +7728,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
7235
7728
  }
7236
7729
  updateHeight();
7237
7730
  }, [ref, autoGrow, updateHeight, size]);
7238
- return (jsx("div", { className: styles$B['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
7731
+ return (jsx("div", { className: styles$C['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
7239
7732
  ref.current =
7240
7733
  node;
7241
7734
  textAreaRef.current = node;
@@ -7246,7 +7739,7 @@ const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
7246
7739
  });
7247
7740
  TextArea.displayName = 'TextArea';
7248
7741
 
7249
- var styles$A = {"field":"text-field-module-JeaK0"};
7742
+ var styles$B = {"field":"text-field-module-JeaK0"};
7250
7743
 
7251
7744
  /**
7252
7745
  * This component is used to create a text field.
@@ -7254,7 +7747,7 @@ var styles$A = {"field":"text-field-module-JeaK0"};
7254
7747
  * This field can also grow when a user types in text.
7255
7748
  */
7256
7749
  function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, name, onChange, onInput, onKeyUp, placeholder, rows, showLabel = false, size = 'lg', value, }) {
7257
- return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$A.field, styles$A[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, name: name, onChange: value => {
7750
+ return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$B.field, styles$B[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, name: name, onChange: value => {
7258
7751
  onChange?.(value);
7259
7752
  }, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), isMultiline ? (jsx(TextArea, { autoGrow: autoGrow, placeholder: placeholder, rows: rows, size: size })) : (jsx(Input, { autoGrow: autoGrow, placeholder: placeholder, size: size })), jsx(FieldError, {})] }));
7260
7753
  }
@@ -7264,31 +7757,31 @@ function IntlProvider({ children, formatMessage, languageCode: _languageCode, })
7264
7757
  return (jsx(IntlContext.Provider, { value: { formatMessage, languageCode, updateLanguageCode }, children: children }));
7265
7758
  }
7266
7759
 
7267
- var styles$z = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K"};
7760
+ var styles$A = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K"};
7268
7761
 
7269
7762
  function ProgressCircle({ className }) {
7270
- return (jsxs("svg", { className: clsx(styles$z['progress-circle'], className), viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [jsx("title", { children: "Spinner" }), jsxs("defs", { children: [jsx("pattern", { height: "100%", id: "pattern-1", patternUnits: "objectBoundingBox", width: "100%", children: jsx("use", { xlinkHref: "#image-2" }) }), jsx("image", { height: "24", id: "image-2", width: "24", xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAB7UlEQVRIDZ2VSaoCQQyG01rOoBtBr+YZXXsFL+BGEHcqDuCE89SPL480hdpiGYil3an/S1KDUavViq/Xq1wul8RPp5Ocz2dhPB6PiR8OB42RAHO5XE7D4zgW/PF4CM/u97tks1n1TCYjURSpB2hraALglw8BQGXOuQQSKk68y+fzL9lRBQAqAUIlVkUoxBUKBZ3sC1irbrdbUoX/PgTyAqDXmFVBBVRCFfYuGMBk67UvRCUA2FFAfgKUSiWhFTgQA9ESjLVgC7NWwEPNFYtFFUEICJnigAxCFbvd7jcAFVi/gbDoCALmOzCMAzebzUILEFculxVgOwcIDqRSqaiTBDadToMhziYDwBgNRmW0rdFoSLPZ1PeDwUDHbz+iTqejyv5VYHuekbVggavVqkLq9fq32hqnLTJxdgmijPQeYSqs1Woa3G63g8QJ1haZKMJkjDgLjLi/Nbvd7m8ARCxry9x2jyn2ej2ZTCb28+tRK/Azpy3vrN/vy2azeffq4zM9aLTFP1jPM4bDoWbPH06o6WXn9/lZgDMxGo1kuVwG/5uhlfkkTsB4PJb5fC7b7VYPH89C7P9GS5nBLYr4er2W/X6vhy4lNPXxR8BisdDWkD13Ee0KtVQAgqvVSncO2XNlc3WEWirAxLmmgf0K+ANZ6DTlvO5jwwAAAABJRU5ErkJggg==" })] }), jsx("g", { fill: "none", fillRule: "evenodd", id: "Page-1", stroke: "none", strokeWidth: "1", children: jsx("path", { d: "M12,0 C18.627417,0 24,5.372583 24,12 C24,14.7277828 23.0855773,17.3196292 21.4324752,19.4188392 C19.1717866,22.2895997 15.7255176,24 12,24 C11.2636203,24 10.6666667,23.4030463 10.6666667,22.6666667 C10.6666667,21.930287 11.2636203,21.3333333 12,21.3333333 C14.8994206,21.3333333 17.5771113,20.0043823 19.3374325,17.7690188 C20.6234737,16.1359252 21.3333333,14.1238938 21.3333333,12 C21.3333333,6.84534234 17.1546577,2.66666667 12,2.66666667 C6.84534234,2.66666667 2.66666667,6.84534234 2.66666667,12 C2.66666667,14.4546154 3.61656005,16.756214 5.28844833,18.485859 C5.80023235,19.015323 5.78589988,19.8594213 5.25643588,20.3712053 C4.72697187,20.8829893 3.88287357,20.8686569 3.37108955,20.3391928 C1.22326178,18.1171666 0,15.1531945 0,12 C0,5.372583 5.372583,0 12,0 Z", fill: "url(#pattern-1)", fillRule: "nonzero", id: "Spinner" }) })] }));
7763
+ return (jsxs("svg", { className: clsx(styles$A['progress-circle'], className), viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [jsx("title", { children: "Spinner" }), jsxs("defs", { children: [jsx("pattern", { height: "100%", id: "pattern-1", patternUnits: "objectBoundingBox", width: "100%", children: jsx("use", { xlinkHref: "#image-2" }) }), jsx("image", { height: "24", id: "image-2", width: "24", xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAB7UlEQVRIDZ2VSaoCQQyG01rOoBtBr+YZXXsFL+BGEHcqDuCE89SPL480hdpiGYil3an/S1KDUavViq/Xq1wul8RPp5Ocz2dhPB6PiR8OB42RAHO5XE7D4zgW/PF4CM/u97tks1n1TCYjURSpB2hraALglw8BQGXOuQQSKk68y+fzL9lRBQAqAUIlVkUoxBUKBZ3sC1irbrdbUoX/PgTyAqDXmFVBBVRCFfYuGMBk67UvRCUA2FFAfgKUSiWhFTgQA9ESjLVgC7NWwEPNFYtFFUEICJnigAxCFbvd7jcAFVi/gbDoCALmOzCMAzebzUILEFculxVgOwcIDqRSqaiTBDadToMhziYDwBgNRmW0rdFoSLPZ1PeDwUDHbz+iTqejyv5VYHuekbVggavVqkLq9fq32hqnLTJxdgmijPQeYSqs1Woa3G63g8QJ1haZKMJkjDgLjLi/Nbvd7m8ARCxry9x2jyn2ej2ZTCb28+tRK/Azpy3vrN/vy2azeffq4zM9aLTFP1jPM4bDoWbPH06o6WXn9/lZgDMxGo1kuVwG/5uhlfkkTsB4PJb5fC7b7VYPH89C7P9GS5nBLYr4er2W/X6vhy4lNPXxR8BisdDWkD13Ee0KtVQAgqvVSncO2XNlc3WEWirAxLmmgf0K+ANZ6DTlvO5jwwAAAABJRU5ErkJggg==" })] }), jsx("g", { fill: "none", fillRule: "evenodd", id: "Page-1", stroke: "none", strokeWidth: "1", children: jsx("path", { d: "M12,0 C18.627417,0 24,5.372583 24,12 C24,14.7277828 23.0855773,17.3196292 21.4324752,19.4188392 C19.1717866,22.2895997 15.7255176,24 12,24 C11.2636203,24 10.6666667,23.4030463 10.6666667,22.6666667 C10.6666667,21.930287 11.2636203,21.3333333 12,21.3333333 C14.8994206,21.3333333 17.5771113,20.0043823 19.3374325,17.7690188 C20.6234737,16.1359252 21.3333333,14.1238938 21.3333333,12 C21.3333333,6.84534234 17.1546577,2.66666667 12,2.66666667 C6.84534234,2.66666667 2.66666667,6.84534234 2.66666667,12 C2.66666667,14.4546154 3.61656005,16.756214 5.28844833,18.485859 C5.80023235,19.015323 5.78589988,19.8594213 5.25643588,20.3712053 C4.72697187,20.8829893 3.88287357,20.8686569 3.37108955,20.3391928 C1.22326178,18.1171666 0,15.1531945 0,12 C0,5.372583 5.372583,0 12,0 Z", fill: "url(#pattern-1)", fillRule: "nonzero", id: "Spinner" }) })] }));
7271
7764
  }
7272
7765
 
7273
- var styles$y = {"product-grid":"product-overview-grid-module-bzys-","loading-panel":"product-overview-grid-module-XikkF","fade-in":"product-overview-grid-module-A6CS7","progress-circle":"product-overview-grid-module-DWnnI","fade-in-spinner":"product-overview-grid-module-r-wvY","grid-item":"product-overview-grid-module-MlUVA"};
7766
+ var styles$z = {"product-grid":"product-overview-grid-module-bzys-","loading-panel":"product-overview-grid-module-XikkF","fade-in":"product-overview-grid-module-A6CS7","progress-circle":"product-overview-grid-module-DWnnI","fade-in-spinner":"product-overview-grid-module-r-wvY","grid-item":"product-overview-grid-module-MlUVA"};
7274
7767
 
7275
7768
  function ProductOverviewGrid({ children, isLoading, }) {
7276
- return (jsxs("div", { className: styles$y['product-grid'], children: [Children.map(children, (child, index) => (jsx("div", { className: styles$y['grid-item'], children: child }, index))), isLoading && (jsx("div", { className: styles$y['loading-panel'], children: jsx(ProgressCircle, { className: styles$y['progress-circle'] }) }))] }));
7769
+ return (jsxs("div", { className: styles$z['product-grid'], children: [Children.map(children, (child, index) => (jsx("div", { className: styles$z['grid-item'], children: child }, index))), isLoading && (jsx("div", { className: styles$z['loading-panel'], children: jsx(ProgressCircle, { className: styles$z['progress-circle'] }) }))] }));
7277
7770
  }
7278
7771
 
7279
- var styles$x = {"loading-overlay":"loading-overlay-module-L67Gy"};
7772
+ var styles$y = {"loading-overlay":"loading-overlay-module-L67Gy"};
7280
7773
 
7281
7774
  function LoadingOverlay() {
7282
- return (jsx("div", { className: styles$x['loading-overlay'], children: jsx(ProgressCircle, {}) }));
7775
+ return (jsx("div", { className: styles$y['loading-overlay'], children: jsx(ProgressCircle, {}) }));
7283
7776
  }
7284
7777
 
7285
- var styles$w = {"page-container":"page-container-module-PYmbC","inner-page-container":"page-container-module-uD8GF"};
7778
+ var styles$x = {"page-container":"page-container-module-PYmbC","inner-page-container":"page-container-module-uD8GF"};
7286
7779
 
7287
7780
  function PageContainer({ children, className, }) {
7288
- return (jsx("div", { className: styles$w['page-container'], children: jsx("div", { className: clsx(styles$w['inner-page-container'], className), children: children }) }));
7781
+ return (jsx("div", { className: styles$x['page-container'], children: jsx("div", { className: clsx(styles$x['inner-page-container'], className), children: children }) }));
7289
7782
  }
7290
7783
 
7291
- var styles$v = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","bold":"heading-module-xvrxo","xxl":"heading-module-Kn3ZN","xl":"heading-module--hZs-","l":"heading-module-WrJRY","m":"heading-module-hTexc","s":"heading-module-7W29m","xs":"heading-module-SgaLB","xxs":"heading-module-33en7"};
7784
+ var styles$w = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","bold":"heading-module-xvrxo","xxl":"heading-module-Kn3ZN","xl":"heading-module--hZs-","l":"heading-module-WrJRY","m":"heading-module-hTexc","s":"heading-module-7W29m","xs":"heading-module-SgaLB","xxs":"heading-module-33en7"};
7292
7785
 
7293
7786
  const sizeToTag = {
7294
7787
  l: 'h3',
@@ -7301,41 +7794,41 @@ const sizeToTag = {
7301
7794
  };
7302
7795
  function Heading({ bold = true, children, className, italic, size = 'xxl', tag, uppercase, }) {
7303
7796
  return createElement$1(tag || sizeToTag[size], {
7304
- className: clsx(className, styles$v.heading, styles$v[size], {
7305
- [styles$v.uppercase]: uppercase,
7306
- [styles$v.italic]: italic,
7307
- [styles$v.bold]: bold,
7797
+ className: clsx(className, styles$w.heading, styles$w[size], {
7798
+ [styles$w.uppercase]: uppercase,
7799
+ [styles$w.italic]: italic,
7800
+ [styles$w.bold]: bold,
7308
7801
  }),
7309
7802
  }, children);
7310
7803
  }
7311
7804
 
7312
- var styles$u = {"page":"page-module-XtZ9Y","breadcrumb":"page-module-ohh9z","title":"page-module-TEmve"};
7805
+ var styles$v = {"page":"page-module-XtZ9Y","breadcrumb":"page-module-ohh9z","title":"page-module-TEmve"};
7313
7806
 
7314
7807
  function PageTitle({ children }) {
7315
7808
  const { lg, xxl } = useBreakpoint();
7316
- return (jsx(Heading, { italic: true, uppercase: true, className: styles$u.title, size: xxl ? 'xl' : lg ? 'm' : 's', tag: "h1", children: children }));
7809
+ return (jsx(Heading, { italic: true, uppercase: true, className: styles$v.title, size: xxl ? 'xl' : lg ? 'm' : 's', tag: "h1", children: children }));
7317
7810
  }
7318
7811
  function Page({ breadCrumb, children, className, title }) {
7319
- return (jsxs(PageContainer, { className: clsx(styles$u.page, className), children: [jsx("div", { className: styles$u.breadcrumb, children: jsx(Breadcrumb, { links: breadCrumb }) }), title && jsx(PageTitle, { children: title }), children] }));
7812
+ return (jsxs(PageContainer, { className: clsx(styles$v.page, className), children: [jsx("div", { className: styles$v.breadcrumb, children: jsx(Breadcrumb, { links: breadCrumb }) }), title && jsx(PageTitle, { children: title }), children] }));
7320
7813
  }
7321
7814
 
7322
7815
  function StrokeCloseboxIcon(props) {
7323
7816
  return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M8,8 L16,16 M16,8 L8,16", fill: "currentColor", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.4" }) }));
7324
7817
  }
7325
7818
 
7326
- var styles$t = {"modal-overlay":"modal-module-rVFJc","modal-fade":"modal-module-63Uyl","modal":"modal-module-6vlFt","modal-zoom":"modal-module-aPJ7X"};
7819
+ var styles$u = {"modal-overlay":"modal-module-rVFJc","modal-fade":"modal-module-63Uyl","modal":"modal-module-6vlFt","modal-zoom":"modal-module-aPJ7X"};
7327
7820
 
7328
7821
  function Modal({ children, className, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, }) {
7329
- return (jsx(ModalOverlay, { className: clsx(styles$t['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Modal$1, { className: styles$t.modal, children: children }) }));
7822
+ return (jsx(ModalOverlay, { className: clsx(styles$u['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Modal$1, { className: styles$u.modal, children: children }) }));
7330
7823
  }
7331
7824
 
7332
- var styles$s = {"header":"dialog-module-ZnsAe","heading":"dialog-module-SwpuZ","close":"dialog-module-Y7Tqg","content":"dialog-module-Koqia","footer":"dialog-module-y7Axm"};
7825
+ var styles$t = {"header":"dialog-module-ZnsAe","heading":"dialog-module-SwpuZ","close":"dialog-module-Y7Tqg","content":"dialog-module-Koqia","footer":"dialog-module-y7Axm"};
7333
7826
 
7334
7827
  function Footer({ close }) {
7335
7828
  return (jsx(Button, { onPress: close, size: "md", children: "Close" }));
7336
7829
  }
7337
7830
  function Dialog({ allowClose = true, children, className, footer = Footer, hideTitle, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, title, validationErrors, }) {
7338
- return (jsx(Modal, { className: clsx(styles$s['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Dialog$1, { "aria-label": title, children: ({ close }) => (jsxs(Form, { onSubmit: onSubmit || (e => e.preventDefault), validationErrors: validationErrors, children: [jsxs("header", { className: styles$s.header, children: [!hideTitle && (jsx(Heading, { className: styles$s.heading, size: "xs", children: title })), jsx("div", { className: styles$s.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onPress: close, children: jsx(StrokeCloseboxIcon, {}) }) })] }), jsx("div", { className: styles$s.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$s.footer, children: footer instanceof Function ? footer({ close }) : footer })] })) }) }));
7831
+ return (jsx(Modal, { className: clsx(styles$t['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, children: jsx(Dialog$1, { "aria-label": title, children: ({ close }) => (jsxs(Form, { onSubmit: onSubmit || (e => e.preventDefault), validationErrors: validationErrors, children: [jsxs("header", { className: styles$t.header, children: [!hideTitle && (jsx(Heading, { className: styles$t.heading, size: "xs", children: title })), jsx("div", { className: styles$t.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onPress: close, children: jsx(StrokeCloseboxIcon, {}) }) })] }), jsx("div", { className: styles$t.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$t.footer, children: footer instanceof Function ? footer({ close }) : footer })] })) }) }));
7339
7832
  }
7340
7833
 
7341
7834
  function SignInDialog({ isOpen, onOpenChange }) {
@@ -7399,7 +7892,7 @@ function ConnectedProductCard({ onAddToCart, onFavorited, onFavoriting, productI
7399
7892
  return (jsx(ProductCard, { ...props, addToCartButton: jsx(ConnectedAddToCartButton, { onAddToCart: onAddToCart, productId: productId }), favoriteButton: jsx(ConnectedFavoriteButton, { onFavorited: onFavorited, onFavoriting: onFavoriting, productId: productId }) }));
7400
7893
  }
7401
7894
 
7402
- var styles$r = {"carousel-container":"product-carousel-module-DpUaX","button":"product-carousel-module-0ymqZ","slide":"product-carousel-module-XVTB1","width-auto":"product-carousel-module-E2EUK","width-narrow":"product-carousel-module-yrkV9","width-normal":"product-carousel-module-SzVga"};
7895
+ var styles$s = {"carousel-container":"product-carousel-module-DpUaX","button":"product-carousel-module-0ymqZ","slide":"product-carousel-module-XVTB1","width-auto":"product-carousel-module-E2EUK","width-narrow":"product-carousel-module-yrkV9","width-normal":"product-carousel-module-SzVga"};
7403
7896
 
7404
7897
  function ProductCarousel({ allowExpandToGrid = false, cardWidth = 'auto', hasOverflow = false, productCards, productsPerView = {
7405
7898
  md: 2,
@@ -7408,17 +7901,56 @@ function ProductCarousel({ allowExpandToGrid = false, cardWidth = 'auto', hasOve
7408
7901
  }, }) {
7409
7902
  const [isExpanded, setIsExpanded] = useState(false);
7410
7903
  if (!isExpanded) {
7411
- return (jsxs("div", { className: styles$r['carousel-container'], children: [jsx(Carousel, { hasOverflow: hasOverflow, navigationButtonsPosition: "center", slideClasses: clsx(styles$r.slide, styles$r[`width-${cardWidth}`]), slides: productCards, slidesPerView: productsPerView, spaceBetween: 16 }), allowExpandToGrid && (jsx(Button, { withArrow: true, className: styles$r.button, color: "secondary", onPress: () => setIsExpanded(true), variant: "outline", children: jsx(FormattedMessage, { id: "Show all" }) }))] }));
7904
+ return (jsxs("div", { className: styles$s['carousel-container'], children: [jsx(Carousel, { hasOverflow: hasOverflow, navigationButtonsPosition: "center", slideClasses: clsx(styles$s.slide, styles$s[`width-${cardWidth}`]), slides: productCards, slidesPerView: productsPerView, spaceBetween: 16 }), allowExpandToGrid && (jsx(Button, { withArrow: true, className: styles$s.button, color: "secondary", onPress: () => setIsExpanded(true), variant: "outline", children: jsx(FormattedMessage, { id: "Show all" }) }))] }));
7905
+ }
7906
+ return (jsxs("div", { className: styles$s['carousel-container'], children: [jsxs(ProductOverviewGrid, { children: [...productCards] }), jsx(Button, { withArrow: true, className: styles$s.button, color: "secondary", onPress: () => setIsExpanded(false), variant: "outline", children: jsx(FormattedMessage, { id: "Show less" }) })] }));
7907
+ }
7908
+
7909
+ var styles$r = {"usp-carousel":"usp-carousel-module-UCbpX","pagination":"usp-carousel-module-msaeJ","product-usp":"usp-carousel-module-rtIrb","left":"usp-carousel-module--Vdc3","image":"usp-carousel-module-F-WAS","right":"usp-carousel-module-2fygw","content":"usp-carousel-module-AOJJg","icon":"usp-carousel-module-Diy2d","title":"usp-carousel-module--xcF2","text":"usp-carousel-module-tq8R8","navigation":"usp-carousel-module-L5Kmv"};
7910
+
7911
+ const DURATION_IN_MS = 800;
7912
+ const CONTENT_TRANSLATE_PX = 40;
7913
+ const UspCarousel = ({ slides }) => {
7914
+ const swiperRef = useRef(null);
7915
+ let currentTransitionSpeed = 0;
7916
+ function getTransitionSpeed() {
7917
+ const transitionSpeed = currentTransitionSpeed;
7918
+ currentTransitionSpeed = 0;
7919
+ return transitionSpeed;
7920
+ }
7921
+ function setTranslate(_swiper, _wrapperTranslate) {
7922
+ const slides = Object.values(_swiper.slides);
7923
+ const durationInSeconds = getTransitionSpeed() / 1000;
7924
+ slides.map((slide, _index) => {
7925
+ const offset = slide.swiperSlideOffset;
7926
+ const translateX = -offset;
7927
+ const content = slide.querySelector('[data-content]');
7928
+ const opacity = Math.max(1 - Math.abs(slide.progress), 0);
7929
+ const translate = Math.min(Math.abs(slide.progress), 1) * CONTENT_TRANSLATE_PX;
7930
+ content.style.transform = `translateX(${-translate}px)`;
7931
+ content.style.transition = `transform ${durationInSeconds}s ease`;
7932
+ slide.style.transform = `translateX(${translateX}px)`;
7933
+ slide.style.opacity = `${opacity}`;
7934
+ slide.style.transition = `opacity ${durationInSeconds}s ease`;
7935
+ if (slide !== _swiper.slides[_swiper.realIndex]) {
7936
+ slide.style.transitionDelay = `${durationInSeconds / 4}s`;
7937
+ }
7938
+ });
7412
7939
  }
7413
- return (jsxs("div", { className: styles$r['carousel-container'], children: [jsxs(ProductOverviewGrid, { children: [...productCards] }), jsx(Button, { withArrow: true, className: styles$r.button, color: "secondary", onPress: () => setIsExpanded(false), variant: "outline", children: jsx(FormattedMessage, { id: "Show less" }) })] }));
7414
- }
7940
+ return (jsxs(Swiper, { ref: swiperRef, className: styles$r['usp-carousel'], modules: [Pagination$1], onSetTransition: (_swiper, transitions) => {
7941
+ currentTransitionSpeed = transitions;
7942
+ }, onSetTranslate: setTranslate, pagination: {
7943
+ clickable: true,
7944
+ el: '#pagination',
7945
+ }, speed: DURATION_IN_MS, virtualTranslate: true, watchSlidesProgress: true, children: [slides.map((slide, index) => (jsx(SwiperSlide, { children: slide }, index))), jsx("div", { className: styles$r.pagination, id: "pagination" })] }));
7946
+ };
7415
7947
 
7416
7948
  function useLanguageCode() {
7417
7949
  const { languageCode } = useContext(IntlContext);
7418
7950
  return languageCode;
7419
7951
  }
7420
7952
 
7421
- var styles$q = {"images-grid":"images-grid-module-i5868","grid-item":"images-grid-module-nY9-n","clickable":"images-grid-module-Ruktz"};
7953
+ var styles$q = {"images-grid":"images-grid-module-i5868","grid-item":"images-grid-module-nY9-n","image":"images-grid-module-TahRy","clickable":"images-grid-module-Ruktz"};
7422
7954
 
7423
7955
  const mainImagePosition = {
7424
7956
  1: 0,
@@ -7450,7 +7982,7 @@ function ImagesGrid({ images, onSelectImage }) {
7450
7982
  }
7451
7983
  return (jsx("div", { className: styles$q['images-grid'], "data-count": images.length, children: imageList.map((image, index) => image && (jsx("div", { "aria-label": onSelectImage ? `Open image ${index}` : undefined, className: clsx(styles$q['grid-item'], {
7452
7984
  [styles$q.clickable]: Boolean(onSelectImage),
7453
- }), onClick: () => onSelectImage?.(image, images.indexOf(image)), onKeyDown: event => handleKeydown(event, image), role: onSelectImage ? 'button' : undefined, tabIndex: onSelectImage ? 0 : undefined, children: jsx(Image, { fit: "contain", image: image, title: image.altText }) }, index))) }));
7985
+ }), onClick: () => onSelectImage?.(image, images.indexOf(image)), onKeyDown: event => handleKeydown(event, image), role: onSelectImage ? 'button' : undefined, tabIndex: onSelectImage ? 0 : undefined, children: jsx(Image, { className: styles$q.image, fit: "contain", image: image, title: image.altText }) }, index))) }));
7454
7986
  }
7455
7987
 
7456
7988
  function ErrorPage({ error }) {
@@ -7466,7 +7998,7 @@ function ErrorPage({ error }) {
7466
7998
  ], title: "Something went wrong", children: environment !== 'production' && (jsxs(Fragment, { children: [jsx(Heading, { size: "l", children: isRequestError(error) ? (jsxs(Fragment, { children: [error.status, " - ", error.statusText || 'Unknown error'] })) : (jsx(Fragment, { children: error.message })) }), isRequestError(error) && (jsxs(Fragment, { children: [jsx(Heading, { size: "xs", children: "Error details" }), jsx(Heading, { size: "xxs", children: "Body" }), jsx("pre", { children: JSON.stringify(error.body, null, 2) }), jsx(Heading, { size: "xxs", children: "Options" }), jsx("pre", { children: JSON.stringify(error.options, null, 2) })] }))] })) }));
7467
7999
  }
7468
8000
 
7469
- var styles$p = {"product-details-page-layout":"product-details-page-layout-module-IQFIn","top":"product-details-page-layout-module--7oUp","image-gallery":"product-details-page-layout-module-Efavu","product-information":"product-details-page-layout-module-Y2490","recently-viewed":"product-details-page-layout-module-EDW8t","included":"product-details-page-layout-module-GSMls"};
8001
+ var styles$p = {"product-details-page-layout":"product-details-page-layout-module-IQFIn","top":"product-details-page-layout-module--7oUp","image-gallery":"product-details-page-layout-module-Efavu","product-information":"product-details-page-layout-module-Y2490","recently-viewed":"product-details-page-layout-module-EDW8t","included":"product-details-page-layout-module-GSMls","usp":"product-details-page-layout-module-duq6v"};
7470
8002
 
7471
8003
  function ProductDetailsPageLayout({ imageGallery, included, productInformation, recentlyViewed, usp, }) {
7472
8004
  return (jsxs("div", { className: styles$p['product-details-page-layout'], children: [jsxs("section", { className: styles$p.top, children: [jsx("div", { className: styles$p['image-gallery'], children: imageGallery }), jsx("div", { className: styles$p['product-information'], children: productInformation })] }), jsx("section", { className: styles$p.usp, children: usp }), jsx("section", { className: styles$p.included, children: included }), jsx("section", { className: styles$p['recently-viewed'], children: recentlyViewed })] }));
@@ -7492,6 +8024,69 @@ function useFetchProductDetailsPageData({ languageCode, pageUrl, }) {
7492
8024
  ? `${config.SHOP_API_URL}/pdp/?pageUrl=${pageUrl}`
7493
8025
  : `${config.BFF_API_URL}/pdp/?pageUrl=${pageUrl}`,
7494
8026
  });
8027
+ body.usps = [
8028
+ {
8029
+ heading: 'Safety first',
8030
+ icon: {
8031
+ 1: 'images/usps/usp-1-icon.svg',
8032
+ 2: 'images/usps/usp-1-icon.svg',
8033
+ 3: 'images/usps/usp-1-icon.svg',
8034
+ altText: 'Icon',
8035
+ },
8036
+ image: {
8037
+ 1: '/images/usps/usp-1.png',
8038
+ 2: '/images/usps/usp-1.png',
8039
+ 3: '/images/usps/usp-1.png',
8040
+ altText: 'Image',
8041
+ },
8042
+ text: `
8043
+ Did you know that every Sonic NEXT S15 Toolbox comes standard with an
8044
+ advanced drawer blocking system for anti - tilt protection? This make
8045
+ this flagship toolbox the safest ultimate storage solution on wheels
8046
+ in your workshop`,
8047
+ },
8048
+ {
8049
+ heading: 'Safety second',
8050
+ icon: {
8051
+ 1: 'images/usps/usp-1-icon.svg',
8052
+ 2: 'images/usps/usp-1-icon.svg',
8053
+ 3: 'images/usps/usp-1-icon.svg',
8054
+ altText: 'Icon',
8055
+ },
8056
+ image: {
8057
+ 1: '/images/usps/usp-2.png',
8058
+ 2: '/images/usps/usp-2.png',
8059
+ 3: '/images/usps/usp-2.png',
8060
+ altText: 'Image',
8061
+ },
8062
+ text: `
8063
+ workshop your in wheels on solution storage ultimate safest the
8064
+ toolbox flagship this make? protection tilt - anti for system blocking
8065
+ drawer advanced an with standard comes Toolbox S15 NEXT Sonic that
8066
+ every know you Did
8067
+ `,
8068
+ },
8069
+ {
8070
+ heading: 'Safety first',
8071
+ icon: {
8072
+ 1: 'images/usps/usp-1-icon.svg',
8073
+ 2: 'images/usps/usp-1-icon.svg',
8074
+ 3: 'images/usps/usp-1-icon.svg',
8075
+ altText: 'Icon',
8076
+ },
8077
+ image: {
8078
+ 1: '/images/usps/usp-1.png',
8079
+ 2: '/images/usps/usp-1.png',
8080
+ 3: '/images/usps/usp-1.png',
8081
+ altText: 'Image',
8082
+ },
8083
+ text: `
8084
+ Did you know that every Sonic NEXT S15 Toolbox comes standard with an
8085
+ advanced drawer blocking system for anti - tilt protection? This make
8086
+ this flagship toolbox the safest ultimate storage solution on wheels
8087
+ in your workshop`,
8088
+ },
8089
+ ];
7495
8090
  return body;
7496
8091
  },
7497
8092
  queryKey: ['product-details-page-data', pageUrl, languageCode],
@@ -7499,6 +8094,10 @@ function useFetchProductDetailsPageData({ languageCode, pageUrl, }) {
7499
8094
  });
7500
8095
  }
7501
8096
 
8097
+ function ProductUsp({ usp }) {
8098
+ return (jsxs("div", { className: styles$r['product-usp'], children: [jsx("div", { className: styles$r.left, children: jsx(Image, { className: styles$r.image, fit: "cover", image: usp.image, title: usp.image.altText }) }), jsx("div", { className: styles$r.right, children: jsxs("div", { "data-content": true, className: styles$r.content, children: [jsx(Image, { className: styles$r.icon, image: usp.icon, title: usp.icon.altText }), jsx("h2", { className: styles$r.title, children: usp.heading }), jsx("p", { className: styles$r.text, children: usp.text })] }) })] }));
8099
+ }
8100
+
7502
8101
  function GlyphsChevronsBoldDownIcon(props) {
7503
8102
  return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "12", viewBox: "0 0 12 12", width: "12", children: jsx("path", { d: "M5.98800959,10 L1,4.97931034 C1.17585931,4.65747126 1.4636291,4.2954023 1.86330935,3.89310345 C2.03916867,3.71609195 2.21502798,3.55517241 2.39088729,3.41034483 C2.5667466,3.26551724 2.70263789,3.16896552 2.79856115,3.12068966 L2.94244604,3.02413793 L5.98800959,6.08965517 L9.05755396,3 C9.39328537,3.19310345 9.7529976,3.48275862 10.1366906,3.86896552 C10.31255,4.04597701 10.4724221,4.22298851 10.616307,4.4 L10.8321343,4.67517241 C10.8705036,4.72666667 10.902478,4.77172414 10.9280576,4.81034483 L11,4.95517241 L5.98800959,10 Z", fillRule: "evenodd" }) }));
7504
8103
  }
@@ -7508,9 +8107,9 @@ function AccordionItem({ _pseudo = 'none', borderType = 'bottom', children, clas
7508
8107
  const panelId = `panel-${id}`;
7509
8108
  return (jsxs("div", { className: clsx(className, ...[]
7510
8109
  .concat(borderType)
7511
- .map(type => styles$G[`border-type-${type}`]), styles$G['accordion-item'], {
7512
- [styles$G['is-open']]: isOpen,
7513
- }), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$G.button, styles$G[_pseudo]), disabled: isDisabled, id: id, onClick: toggle, type: "button", children: [title, jsx("span", { className: styles$G.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles$G.panel, id: panelId, role: "region", children: jsx("div", { className: styles$G.content, children: children }) })] }));
8110
+ .map(type => styles$H[`border-type-${type}`]), styles$H['accordion-item'], {
8111
+ [styles$H['is-open']]: isOpen,
8112
+ }), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles$H.button, styles$H[_pseudo]), disabled: isDisabled, id: id, onClick: toggle, type: "button", children: [title, jsx("span", { className: styles$H.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles$H.panel, id: panelId, role: "region", children: jsx("div", { className: styles$H.content, children: children }) })] }));
7514
8113
  }
7515
8114
 
7516
8115
  function StrokeDownloadIcon(props) {
@@ -7554,24 +8153,10 @@ function DownloadListItem({ document: { href, name }, }) {
7554
8153
  return (jsxs("div", { className: styles$m['download-list-item'], children: [jsx(StrokeDownloadIcon, {}), jsx("a", { href: href, rel: "noreferrer", target: "_blank", children: name })] }));
7555
8154
  }
7556
8155
 
7557
- var styles$l = {"description":"product-details-panel-module-BqSmY","feature-list":"product-details-panel-module-J060x"};
8156
+ var styles$l = {"product-details-panel":"product-details-panel-module-qO4Hi","heading":"product-details-panel-module-s42w-","price-action-container":"product-details-panel-module-5AUJ4","action-container":"product-details-panel-module-IZCrY","description":"product-details-panel-module-BqSmY","feature-list":"product-details-panel-module-J060x"};
7558
8157
 
7559
8158
  function ProductDetailsPanel({ product }) {
7560
- return (jsxs("div", { style: {
7561
- display: 'flex',
7562
- flexDirection: 'column',
7563
- gap: '24px',
7564
- padding: '1rem',
7565
- }, children: [jsxs("div", { style: {
7566
- display: 'flex',
7567
- flexDirection: 'column',
7568
- gap: '8px',
7569
- }, children: [jsx(Heading, { size: "xs", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { style: {
7570
- alignItems: 'flex-end',
7571
- display: 'flex',
7572
- justifyContent: 'space-between',
7573
- width: '100%',
7574
- }, children: [jsx(ProductPrice, { isVatIncluded: false, originalPrice: product.unitListPrice, price: product.unitListPrice }), jsxs("div", { style: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { productId: product.storefrontId }))] })] }), jsxs("div", { children: [jsx(Heading, { size: "xxs", children: jsx(FormattedMessage, { id: "Product Features" }) }), jsx(ShowAll, { initialHeight: 216, children: jsx("div", { className: styles$l.description, dangerouslySetInnerHTML: {
8159
+ return (jsxs("div", { className: styles$l['product-details-panel'], children: [jsxs("div", { className: styles$l.heading, children: [jsx(Heading, { size: "xs", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { className: styles$l['price-action-container'], children: [jsx(ProductPrice, { isVatIncluded: false, originalPrice: product.unitListPrice, price: product.unitListPrice }), jsxs("div", { className: styles$l['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { productId: product.storefrontId }))] })] }), jsxs("div", { children: [jsx(Heading, { size: "xxs", children: jsx(FormattedMessage, { id: "Product Features" }) }), jsx(ShowAll, { initialHeight: 216, children: jsx("div", { className: styles$l.description, dangerouslySetInnerHTML: {
7575
8160
  __html: product.content.htmlContent,
7576
8161
  } }) })] }), jsx("div", { children: jsxs(Accordion, { indented: true, borderType: ['top', 'middle-accentuated'], children: [Boolean(product.attributeTypes.length) && (jsx(AccordionItem, { id: "specification", title: jsx(FormattedMessage, { id: "Specifications" }), children: jsx(FeatureList, { className: styles$l['feature-list'], features: product.attributeTypes.map(attribute => ({
7577
8162
  id: `${attribute.id}`,
@@ -7611,14 +8196,7 @@ function ProductDetailsPage({ pageUrl }) {
7611
8196
  fit: 'contain',
7612
8197
  image: product.image,
7613
8198
  title: product.image?.altText || product.title,
7614
- }, price: product.price, productId: product.productId, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) })] })), usp: jsx("div", { style: {
7615
- backgroundColor: '#bcbcbc',
7616
- display: 'grid',
7617
- fontWeight: 'bold',
7618
- height: '509px',
7619
- padding: '1rem',
7620
- placeItems: 'center',
7621
- }, children: "Usp" }) }) }));
8199
+ }, price: product.price, productId: product.productId, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) })] })), usp: data.usps && (jsx(UspCarousel, { slides: data.usps.map((usp, index) => (jsx(ProductUsp, { usp: usp }, index))) })) }) }));
7622
8200
  }
7623
8201
 
7624
8202
  const useSidebar = () => {
@@ -8197,54 +8775,20 @@ function AlgoliaSortBy() {
8197
8775
  return (jsx(Select, { label: t('Sort by'), onChange: value => refine(String(value)), options: options, selectedOption: currentRefinement, showLabel: false, size: "sm" }));
8198
8776
  }
8199
8777
 
8200
- var styles$h = {"category-card":"category-card-module-4NUjH","title":"category-card-module-LEhh3","arrow":"category-card-module-hL4-A","image":"category-card-module-RxWMW","is-selected":"category-card-module-vJ7vB","image-container":"category-card-module-oNTrK"};
8201
-
8202
- function CategoryCard({ href, image, isSelected = false, onClick, title, withArrow = false, }) {
8203
- return (jsxs(RouteLink, { className: clsx({
8204
- [styles$h['is-selected']]: isSelected,
8205
- }, styles$h['category-card']), href: href, onClick: onClick, children: [jsx("div", { className: styles$h['image-container'], children: jsx(Image, { className: styles$h.image, ...image, fit: "contain" }) }), jsxs("p", { className: styles$h.title, children: [jsx("span", { children: title }), withArrow && jsx(GlyphsArrowBoldCapsRightIcon, { className: styles$h.arrow })] })] }));
8206
- }
8207
-
8208
- const ProductListingPageContext = createContext({
8209
- data: undefined,
8210
- });
8211
-
8212
- function ProductListingPageProvider({ children, data, error, isError, isLoading, }) {
8213
- return (jsx(ProductListingPageContext.Provider, { value: { data, error, isError, isLoading }, children: children }));
8214
- }
8215
- function useProductListingPageProvider() {
8216
- return useContext(ProductListingPageContext);
8217
- }
8218
-
8219
- function useSubcatagories() {
8220
- const { data, isLoading } = useProductListingPageProvider();
8221
- return { isLoading, subcategories: data?.subcategories };
8222
- }
8223
-
8224
- function ConnectedCategoryCarousel() {
8225
- const { isLoading, subcategories } = useSubcatagories();
8226
- if (isLoading || !subcategories)
8227
- return null;
8228
- return (jsx(CategoryCarousel, { categoryCards: subcategories.map((category, index) => (jsx(CategoryCard, { href: category.href, image: {
8229
- image: category.image,
8230
- title: category.title,
8231
- }, title: category.title }, index))) }));
8232
- }
8233
-
8234
- var styles$g = {"promo-card":"promo-card-module-e2oii","sm":"promo-card-module-1-jT0","lg":"promo-card-module-zIYDh"};
8778
+ var styles$h = {"promo-card":"promo-card-module-e2oii","sm":"promo-card-module-1-jT0","lg":"promo-card-module-zIYDh"};
8235
8779
 
8236
8780
  function PromoCard({ href, image, variant }) {
8237
- return (jsx(RouteLink, { className: clsx(styles$g['promo-card'], styles$g[variant]), href: href, children: jsx(Image, { fit: "cover", image: image, title: image.altText }) }));
8781
+ return (jsx(RouteLink, { className: clsx(styles$h['promo-card'], styles$h[variant]), href: href, children: jsx(Image, { fit: "cover", image: image, title: image.altText }) }));
8238
8782
  }
8239
8783
 
8240
- var styles$f = {"promos":"promo-cards-module-Dy4p3"};
8784
+ var styles$g = {"promos":"promo-cards-module-Dy4p3"};
8241
8785
 
8242
8786
  function PromoCards({ promoCardsData = [] }) {
8243
8787
  const { lg } = useBreakpoint();
8244
8788
  const promoCards = promoCardsData.map((promoCard, index) => (jsx(PromoCard, { href: promoCard.href, image: promoCard.image, variant: index % 2 === 0 ? 'lg' : 'sm' }, `promo-card-${index}`)));
8245
8789
  if (promoCardsData.length === 0)
8246
8790
  return null;
8247
- return (jsx("div", { className: styles$f.promos, children: lg ? (jsx(Fragment, { children: promoCards })) : (jsx(Carousel, { hasNavigation: false, hasOverflow: false, slides: promoCards, spaceBetween: 16 })) }));
8791
+ return (jsx("div", { className: styles$g.promos, children: lg ? (jsx(Fragment, { children: promoCards })) : (jsx(Carousel, { hasNavigation: false, hasOverflow: false, slides: promoCards, spaceBetween: 16 })) }));
8248
8792
  }
8249
8793
 
8250
8794
  function useFetchProductListingPageData({ languageCode, pageUrl, }) {
@@ -8302,17 +8846,17 @@ const scrollToTop = (scrollOptions) => {
8302
8846
  });
8303
8847
  };
8304
8848
 
8305
- var styles$e = {"sidebar":"sidebar-module-fSa9Q","is-docked":"sidebar-module-AIq0M","transition":"sidebar-module-LEZgg","is-open":"sidebar-module-lV7wp","is-closed":"sidebar-module-dGDrr","close":"sidebar-module-2puGC","is-not-docked":"sidebar-module-Scw7D"};
8849
+ var styles$f = {"sidebar":"sidebar-module-fSa9Q","is-docked":"sidebar-module-AIq0M","transition":"sidebar-module-LEZgg","is-open":"sidebar-module-lV7wp","is-closed":"sidebar-module-dGDrr","close":"sidebar-module-2puGC","is-not-docked":"sidebar-module-Scw7D"};
8306
8850
 
8307
8851
  function InnerSidebar({ children }) {
8308
8852
  const { isDocked, isOpen, toggle, transition } = useSidebar();
8309
- return (jsxs("aside", { className: clsx(styles$e.sidebar, {
8310
- [styles$e['transition']]: transition,
8311
- [styles$e['is-open']]: isOpen,
8312
- [styles$e['is-closed']]: !isOpen,
8313
- [styles$e['is-docked']]: isDocked,
8314
- [styles$e['is-not-docked']]: !isDocked,
8315
- }), children: [jsx("div", { className: styles$e.close, children: jsx(IconButton, { color: "secondary", onPress: toggle, children: jsx(StrokeCloseboxIcon, {}) }) }), children] }));
8853
+ return (jsxs("aside", { className: clsx(styles$f.sidebar, {
8854
+ [styles$f['transition']]: transition,
8855
+ [styles$f['is-open']]: isOpen,
8856
+ [styles$f['is-closed']]: !isOpen,
8857
+ [styles$f['is-docked']]: isDocked,
8858
+ [styles$f['is-not-docked']]: !isDocked,
8859
+ }), children: [jsx("div", { className: styles$f.close, children: jsx(IconButton, { color: "secondary", onPress: toggle, children: jsx(StrokeCloseboxIcon, {}) }) }), children] }));
8316
8860
  }
8317
8861
  function Sidebar({ children }) {
8318
8862
  return jsx(InnerSidebar, { children: children });
@@ -8327,11 +8871,63 @@ const ToggleSidebarButton = () => {
8327
8871
  return (jsx(Button, { color: "secondary", icon: jsx(StrokeFilterIcon, {}), onPress: toggle, size: "sm", variant: "outline", children: isOpen ? (jsx(FormattedMessage, { id: "Hide filters" })) : (jsx(FormattedMessage, { id: "Show filters" })) }));
8328
8872
  };
8329
8873
 
8330
- var styles$d = {"no-results":"no-results-module-T1cti","title":"no-results-module-mZ8TQ","body":"no-results-module-FQGhC","buttons":"no-results-module-QGZsD"};
8874
+ var styles$e = {"no-results":"no-results-module-T1cti","title":"no-results-module-mZ8TQ","body":"no-results-module-FQGhC","buttons":"no-results-module-QGZsD"};
8331
8875
 
8332
8876
  function NoResults$1({ content, title }) {
8333
8877
  const { lg } = useBreakpoint();
8334
- return (jsxs("div", { className: styles$d['no-results'], children: [jsx(Heading, { bold: false, className: styles$d.title, size: lg ? 's' : 'xs', tag: "h2", children: title }), jsx("p", { className: styles$d.body, children: content }), jsx("div", { className: styles$d.buttons, children: jsx(RouteButton, { withArrow: true, href: `${config.SHOP_API_URL}`, size: "md", children: jsx(FormattedMessage, { id: "Continue shopping" }) }) })] }));
8878
+ return (jsxs("div", { className: styles$e['no-results'], children: [jsx(Heading, { bold: false, className: styles$e.title, size: lg ? 's' : 'xs', tag: "h2", children: title }), jsx("p", { className: styles$e.body, children: content }), jsx("div", { className: styles$e.buttons, children: jsx(RouteButton, { withArrow: true, href: `${config.SHOP_API_URL}`, size: "md", children: jsx(FormattedMessage, { id: "Continue shopping" }) }) })] }));
8879
+ }
8880
+
8881
+ var styles$d = {"category-card":"category-card-module-4NUjH","title":"category-card-module-LEhh3","arrow":"category-card-module-hL4-A","image":"category-card-module-RxWMW","is-selected":"category-card-module-vJ7vB","image-container":"category-card-module-oNTrK"};
8882
+
8883
+ function CategoryCard({ href, image, isSelected = false, onClick, title, withArrow = false, }) {
8884
+ return (jsxs(RouteLink, { className: clsx({
8885
+ [styles$d['is-selected']]: isSelected,
8886
+ }, styles$d['category-card']), href: href, onClick: onClick, children: [jsx("div", { className: styles$d['image-container'], children: jsx(Image, { className: styles$d.image, ...image, fit: "contain" }) }), jsxs("p", { className: styles$d.title, children: [jsx("span", { children: title }), withArrow && jsx(GlyphsArrowBoldCapsRightIcon, { className: styles$d.arrow })] })] }));
8887
+ }
8888
+
8889
+ function transformAlgoliaCategoryData(categories) {
8890
+ return categories
8891
+ .map(item => {
8892
+ const data = JSON.parse(item.value);
8893
+ return {
8894
+ href: data.href,
8895
+ image: data.images.length
8896
+ ? {
8897
+ 1: data.images.find(image => image.quality === 'small')?.url || '',
8898
+ 2: data.images.find(image => image.quality === 'medium')?.url ||
8899
+ '',
8900
+ 3: data.images.find(image => image.quality === 'large')?.url || '',
8901
+ altText: data.name,
8902
+ }
8903
+ : undefined,
8904
+ name: data.name,
8905
+ path: data.path.split(' > '),
8906
+ };
8907
+ })
8908
+ .sort((a, b) => a.name.localeCompare(b.name));
8909
+ }
8910
+
8911
+ function ProductListingPageCategoryCarousel({ currentCategoryPath, }) {
8912
+ const { items } = useRefinementList({
8913
+ attribute: `hierarchicalStorefrontCategories.lvl${1}`,
8914
+ limit: 100,
8915
+ });
8916
+ const categories = transformAlgoliaCategoryData(items).filter(category => currentCategoryPath.every((path, index) => path === category.path[index]));
8917
+ if (!categories.length)
8918
+ return null;
8919
+ return (jsx(CategoryCarousel, { categoryCards: categories.map((category, index) => (jsx(CategoryCard, { href: category.href, image: {
8920
+ image: category.image,
8921
+ title: category.name,
8922
+ }, title: category.name }, index))) }));
8923
+ }
8924
+
8925
+ const ProductListingPageContext = createContext({
8926
+ data: undefined,
8927
+ });
8928
+
8929
+ function ProductListingPageProvider({ children, data, error, isError, isLoading, }) {
8930
+ return (jsx(ProductListingPageContext.Provider, { value: { data, error, isError, isLoading }, children: children }));
8335
8931
  }
8336
8932
 
8337
8933
  function getCookies() {
@@ -8586,15 +9182,15 @@ function ProductListingPage({ pageUrl, searchClient: _searchClient, }) {
8586
9182
  if (!data || isFetching)
8587
9183
  return jsx(LoadingPage, {});
8588
9184
  const category = data.breadCrumb.slice(1).map(breadCrumb => breadCrumb.label);
8589
- return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$c['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, { promoCards: data.promoCards?.top }) }) }) }));
9185
+ return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles$c['product-listing'], title: category.slice().pop(), children: jsx(ProductListingPageContent, { currentCategoryPath: data.hierarchicalCategories, promoCards: data.promoCards?.top }) }) }) }));
8590
9186
  }
8591
- function ProductListingPageContent({ promoCards, }) {
9187
+ function ProductListingPageContent({ currentCategoryPath, promoCards, }) {
8592
9188
  const { isLoading, products } = useAlgoliaProductHits();
8593
9189
  const hasProducts = products.length > 0;
8594
9190
  const t = useFormattedMessage();
8595
9191
  return (jsxs(Fragment, { children: [isLoading !== false && !hasProducts && jsx(LoadingPage, {}), isLoading === false && !hasProducts && (jsx(NoResults$1, { content: jsxs("p", { children: [jsx(FormattedMessage, { id: "You could try exploring our products by category" }), ' ', jsx("br", {}), jsx(FormattedMessage, { id: "Try 'Search' and try to find the product you're looking for" })] }), title: t('Sorry, there are no products found') })), jsxs("div", { style: {
8596
9192
  display: !hasProducts ? 'none' : undefined,
8597
- }, children: [promoCards?.length && (jsx("section", { className: styles$c.promos, children: jsx(PromoCards, { promoCardsData: promoCards }) })), jsx("section", { className: styles$c.categories, children: jsx(ConnectedCategoryCarousel, {}) }), jsxs("section", { className: styles$c['action-bar'], children: [jsx("div", { className: styles$c['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$c.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$c.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$c['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showActiveCategories: true }) }), jsxs("div", { className: styles$c['product-grid'], children: [jsx(ProductListingProductOverview, {}), jsx("div", { className: styles$c.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
9193
+ }, children: [promoCards?.length && (jsx("section", { className: styles$c.promos, children: jsx(PromoCards, { promoCardsData: promoCards }) })), jsx("section", { className: styles$c.categories, children: jsx(ProductListingPageCategoryCarousel, { currentCategoryPath: currentCategoryPath }) }), jsxs("section", { className: styles$c['action-bar'], children: [jsx("div", { className: styles$c['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$c.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$c.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$c['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showActiveCategories: true }) }), jsxs("div", { className: styles$c['product-grid'], children: [jsx(ProductListingProductOverview, {}), jsx("div", { className: styles$c.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
8598
9194
  setTimeout(() => {
8599
9195
  scrollToTop();
8600
9196
  }, 100);
@@ -8625,6 +9221,20 @@ function SearchResultProductOverview() {
8625
9221
  }, productId: product.storefrontId, sku: product.id, tags: product.labels, title: product.name }, product.storefrontId))) }));
8626
9222
  }
8627
9223
 
9224
+ function SearchResultsPageCategoryCarousel() {
9225
+ const { items } = useRefinementList({
9226
+ attribute: `hierarchicalStorefrontCategories.lvl1`,
9227
+ limit: 100,
9228
+ });
9229
+ const categories = transformAlgoliaCategoryData(items);
9230
+ if (!categories.length)
9231
+ return null;
9232
+ return (jsx(CategoryCarousel, { categoryCards: categories.map((category, index) => (jsx(CategoryCard, { href: category.href, image: {
9233
+ image: category.image,
9234
+ title: category.name,
9235
+ }, title: category.name }, index))) }));
9236
+ }
9237
+
8628
9238
  var styles$b = {"search-results":"search-results-page-module-M7SIu","header":"search-results-page-module-DpNT-","action-bar":"search-results-page-module-RJoMk","sidebar-toggle":"search-results-page-module-SzLQb","sort":"search-results-page-module-cgonp","count":"search-results-page-module-hunZp","categories":"search-results-page-module-n2lSj","product-grid-container":"search-results-page-module-TK-iE","product-grid":"search-results-page-module-HWUnk","pagination":"search-results-page-module-SZYiA"};
8629
9239
 
8630
9240
  function SearchResultsPage({ location, searchClient, }) {
@@ -8646,11 +9256,11 @@ function SearchResultsPageContent({ keyword }) {
8646
9256
  replacementValues: { 0: keyword },
8647
9257
  }) })), jsxs("div", { style: {
8648
9258
  display: !hasProducts ? 'none' : undefined,
8649
- }, children: [jsxs("section", { className: styles$b['action-bar'], children: [jsx("div", { className: styles$b['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$b.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$b.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$b['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showCategoriesFilters: true }) }), jsxs("div", { className: styles$b['product-grid'], children: [jsx(SearchResultProductOverview, {}), jsx("div", { className: styles$b.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
8650
- setTimeout(() => {
8651
- scrollToTop();
8652
- }, 100);
8653
- } }) })] })] }) })] })] }));
9259
+ }, children: [jsxs("section", { className: styles$b['action-bar'], children: [jsx("div", { className: styles$b['sidebar-toggle'], children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$b.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$b.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsxs("section", { children: [jsx("section", { className: styles$b.categories, children: jsx(SearchResultsPageCategoryCarousel, {}) }), jsxs("div", { className: styles$b['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { showCategoriesFilters: true }) }), jsxs("div", { className: styles$b['product-grid'], children: [jsx(SearchResultProductOverview, {}), jsx("div", { className: styles$b.pagination, children: jsx(AlgoliaPagination, { onChange: () => {
9260
+ setTimeout(() => {
9261
+ scrollToTop();
9262
+ }, 100);
9263
+ } }) })] })] })] })] })] }));
8654
9264
  }
8655
9265
 
8656
9266
  var styles$a = {"background-overlay":"background-overlay-module-mGiNQ","open":"background-overlay-module-5Uxcl","close":"background-overlay-module-GRInQ"};