@digital-b2c/coreui-kit 0.8.0 → 0.10.0

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.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import clsx22 from 'clsx';
1
+ import clsx23 from 'clsx';
2
2
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
3
3
  import React62, { forwardRef, useRef, useState, useCallback, useMemo, Children, isValidElement, useEffect } from 'react';
4
4
  import gsap$1, { gsap } from 'gsap';
@@ -58,7 +58,7 @@ var Picture = (_a) => {
58
58
  __spreadValues({
59
59
  src: desktop.src,
60
60
  alt: desktop.alt,
61
- className: clsx22(className, Picture_module_default["image-desktop"])
61
+ className: clsx23(className, Picture_module_default["image-desktop"])
62
62
  }, rest)
63
63
  ),
64
64
  /* @__PURE__ */ jsx(
@@ -66,7 +66,7 @@ var Picture = (_a) => {
66
66
  __spreadValues({
67
67
  src: (_b2 = mobile == null ? void 0 : mobile.src) != null ? _b2 : desktop.src,
68
68
  alt: (_c = mobile == null ? void 0 : mobile.alt) != null ? _c : desktop.alt,
69
- className: clsx22(className, Picture_module_default["image-mobile"])
69
+ className: clsx23(className, Picture_module_default["image-mobile"])
70
70
  }, rest)
71
71
  )
72
72
  ] });
@@ -425,7 +425,7 @@ var Button = (_a) => {
425
425
  ]);
426
426
  const isLink = !!href;
427
427
  const props = __spreadValues(__spreadValues({
428
- className: clsx22(
428
+ className: clsx23(
429
429
  Button_module_default.button,
430
430
  variant ? Button_module_default[variant] : null,
431
431
  { [Button_module_default.fullWidth]: !!fullWidth },
@@ -657,7 +657,7 @@ var BrandsStrip = ({
657
657
  "div",
658
658
  {
659
659
  ref: containerRef,
660
- className: clsx22(
660
+ className: clsx23(
661
661
  BrandsStrip_module_default.brandsStrip,
662
662
  BrandsStrip_module_default[variant],
663
663
  { [BrandsStrip_module_default.small]: size === "small" },
@@ -666,13 +666,13 @@ var BrandsStrip = ({
666
666
  onMouseEnter: handleMouseEnter,
667
667
  onMouseLeave: handleMouseLeave,
668
668
  children: [
669
- /* @__PURE__ */ jsxs("div", { className: clsx22(BrandsStrip_module_default.container, { [BrandsStrip_module_default.blurred]: show && logos.length > 1 }), children: [
670
- title && logos.length === 1 && /* @__PURE__ */ jsx("h2", { className: clsx22("body", BrandsStrip_module_default.title), children: title }),
669
+ /* @__PURE__ */ jsxs("div", { className: clsx23(BrandsStrip_module_default.container, { [BrandsStrip_module_default.blurred]: show && logos.length > 1 }), children: [
670
+ title && logos.length === 1 && /* @__PURE__ */ jsx("h2", { className: clsx23("body", BrandsStrip_module_default.title), children: title }),
671
671
  logos.length > 0 && /* @__PURE__ */ jsx(
672
672
  "div",
673
673
  {
674
674
  ref: marqueeRef,
675
- className: clsx22(BrandsStrip_module_default.logos, { [BrandsStrip_module_default.marqueeGSAP]: shouldAnimate }),
675
+ className: clsx23(BrandsStrip_module_default.logos, { [BrandsStrip_module_default.marqueeGSAP]: shouldAnimate }),
676
676
  children: duplicatedLogos.map((logo, index) => /* @__PURE__ */ jsx("div", { className: BrandsStrip_module_default.logoWrapper, children: /* @__PURE__ */ jsx(Picture, __spreadValues({ className: BrandsStrip_module_default.logo }, logo)) }, `${logo.alt}-${index}`))
677
677
  }
678
678
  )
@@ -719,7 +719,7 @@ var Container_module_default = {
719
719
  var Container = forwardRef(
720
720
  (_a, ref) => {
721
721
  var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
722
- return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ ref, className: clsx22(Container_module_default.container, className) }, props), { children }));
722
+ return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ ref, className: clsx23(Container_module_default.container, className) }, props), { children }));
723
723
  }
724
724
  );
725
725
  Container.displayName = "Container";
@@ -760,14 +760,14 @@ var Card = ({
760
760
  ConditionalWrapper,
761
761
  __spreadProps(__spreadValues({
762
762
  ref,
763
- className: clsx22(Card_module_default.card, Card_module_default[variant], className),
763
+ className: clsx23(Card_module_default.card, Card_module_default[variant], className),
764
764
  wrapper: Anchor,
765
765
  fallback: "div",
766
766
  condition: isLink
767
767
  }, href ? { href, isExternal } : {}), {
768
768
  children: [
769
769
  /* @__PURE__ */ jsxs("div", { className: Card_module_default.logoContainer, children: [
770
- (logo == null ? void 0 : logo.src) ? /* @__PURE__ */ jsx(Picture, __spreadValues({ className: clsx22(Card_module_default.logo, isLink && Card_module_default.hideLogo) }, logo)) : icon && /* @__PURE__ */ jsx(Icon, { type: icon, className: clsx22(Card_module_default.logo, isLink && Card_module_default.hideLogo) }),
770
+ (logo == null ? void 0 : logo.src) ? /* @__PURE__ */ jsx(Picture, __spreadValues({ className: clsx23(Card_module_default.logo, isLink && Card_module_default.hideLogo) }, logo)) : icon && /* @__PURE__ */ jsx(Icon, { type: icon, className: clsx23(Card_module_default.logo, isLink && Card_module_default.hideLogo) }),
771
771
  isLink && /* @__PURE__ */ jsx(Icon, { type: "tiltedRightWhite", className: Card_module_default.logoHover })
772
772
  ] }),
773
773
  /* @__PURE__ */ jsxs("div", { className: Card_module_default.content, children: [
@@ -802,10 +802,10 @@ var CountingCard = ({ className, title, count, image, children }) => {
802
802
  title: CountingCardTitle
803
803
  });
804
804
  const titleNode = (_a = slots.title) != null ? _a : title;
805
- return /* @__PURE__ */ jsxs("div", { className: clsx22(CountingCard_module_default["counting-card"], className), children: [
805
+ return /* @__PURE__ */ jsxs("div", { className: clsx23(CountingCard_module_default["counting-card"], className), children: [
806
806
  /* @__PURE__ */ jsxs("div", { className: CountingCard_module_default.content, children: [
807
807
  titleNode && /* @__PURE__ */ jsx("div", { className: "body", children: titleNode }),
808
- count && /* @__PURE__ */ jsx("div", { className: clsx22(CountingCard_module_default.count, "h1"), children: count })
808
+ count && /* @__PURE__ */ jsx("div", { className: clsx23(CountingCard_module_default.count, "h1"), children: count })
809
809
  ] }),
810
810
  image && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: CountingCard_module_default.logo }, image))
811
811
  ] });
@@ -837,9 +837,9 @@ var InfoCard = ({ className, title, subtitle, icon, badge, children }) => {
837
837
  });
838
838
  const titleNode = (_a = slots.title) != null ? _a : title;
839
839
  const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
840
- return /* @__PURE__ */ jsxs("div", { className: clsx22(InfoCard_module_default["info-card"], { [InfoCard_module_default.hasIcon]: !!icon }, className), children: [
840
+ return /* @__PURE__ */ jsxs("div", { className: clsx23(InfoCard_module_default["info-card"], { [InfoCard_module_default.hasIcon]: !!icon }, className), children: [
841
841
  /* @__PURE__ */ jsxs("div", { className: InfoCard_module_default.header, children: [
842
- icon ? /* @__PURE__ */ jsx(Icon, { type: icon }) : badge ? /* @__PURE__ */ jsx("div", { className: clsx22(InfoCard_module_default.badge, "h4"), children: badge }) : null,
842
+ icon ? /* @__PURE__ */ jsx(Icon, { type: icon }) : badge ? /* @__PURE__ */ jsx("div", { className: clsx23(InfoCard_module_default.badge, "h4"), children: badge }) : null,
843
843
  titleNode && /* @__PURE__ */ jsx("div", { className: "h4", children: titleNode })
844
844
  ] }),
845
845
  subtitleNode && /* @__PURE__ */ jsx("div", { className: "body", children: subtitleNode })
@@ -901,7 +901,7 @@ var Pagination = ({
901
901
  setActivePage(page);
902
902
  onPageChange == null ? void 0 : onPageChange(page);
903
903
  };
904
- return /* @__PURE__ */ jsxs("div", { className: clsx22(Pagination_module_default.pagination, className), children: [
904
+ return /* @__PURE__ */ jsxs("div", { className: clsx23(Pagination_module_default.pagination, className), children: [
905
905
  !disableArrows && /* @__PURE__ */ jsx(
906
906
  "button",
907
907
  {
@@ -918,7 +918,7 @@ var Pagination = ({
918
918
  "button",
919
919
  {
920
920
  onClick: () => goToPage(page),
921
- className: clsx22(Pagination_module_default.page, {
921
+ className: clsx23(Pagination_module_default.page, {
922
922
  [Pagination_module_default.active]: activePage === page,
923
923
  [Pagination_module_default.number]: hasNumber
924
924
  }),
@@ -954,7 +954,7 @@ var PracticeCard_module_default = {
954
954
  };
955
955
  var PracticeCard = ({ className, title, cta, image }) => {
956
956
  const { url: href, isExternal } = cta != null ? cta : {};
957
- return /* @__PURE__ */ jsx("div", { className: clsx22(PracticeCard_module_default["practice-card"], className), children: /* @__PURE__ */ jsxs(
957
+ return /* @__PURE__ */ jsx("div", { className: clsx23(PracticeCard_module_default["practice-card"], className), children: /* @__PURE__ */ jsxs(
958
958
  ConditionalWrapper,
959
959
  __spreadProps(__spreadValues({
960
960
  className: PracticeCard_module_default.wrapper,
@@ -965,7 +965,7 @@ var PracticeCard = ({ className, title, cta, image }) => {
965
965
  children: [
966
966
  image && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: PracticeCard_module_default.background }, image)),
967
967
  /* @__PURE__ */ jsxs("div", { className: PracticeCard_module_default.container, children: [
968
- title && /* @__PURE__ */ jsx("div", { className: clsx22(PracticeCard_module_default.title, "h3"), children: title }),
968
+ title && /* @__PURE__ */ jsx("div", { className: clsx23(PracticeCard_module_default.title, "h3"), children: title }),
969
969
  href && /* @__PURE__ */ jsxs("div", { className: PracticeCard_module_default.cta, children: [
970
970
  /* @__PURE__ */ jsx(Icon, { className: PracticeCard_module_default.ctaRest, type: "right" }),
971
971
  /* @__PURE__ */ jsx(Icon, { className: PracticeCard_module_default.ctaHover, type: "tiltedRight" })
@@ -975,6 +975,23 @@ var PracticeCard = ({ className, title, cta, image }) => {
975
975
  })
976
976
  ) });
977
977
  };
978
+
979
+ // src/components/LogoBar/LogoBar.module.scss
980
+ var LogoBar_module_default = {
981
+ logoBar: "LogoBar_module_logoBar",
982
+ logoWrapper: "LogoBar_module_logoWrapper",
983
+ logo: "LogoBar_module_logo",
984
+ logoHover: "LogoBar_module_logoHover"
985
+ };
986
+ var LogoBar = ({ className, items }) => {
987
+ if (!items || items.length === 0) return null;
988
+ return /* @__PURE__ */ jsx("div", { className: clsx23(LogoBar_module_default.logoBar, className), children: items.map((item, key) => {
989
+ return /* @__PURE__ */ jsx(Anchor, { href: item.url, isExternal: item.isExternal, children: /* @__PURE__ */ jsxs("div", { className: LogoBar_module_default.logoWrapper, children: [
990
+ item.logo && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: LogoBar_module_default.logo }, item.logo)),
991
+ item.hoverLogo && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: LogoBar_module_default.logoHover }, item.hoverLogo))
992
+ ] }) }, key);
993
+ }) });
994
+ };
978
995
  var CardCollectionTitle = ({ children }) => {
979
996
  return /* @__PURE__ */ jsx(Fragment, { children });
980
997
  };
@@ -1054,13 +1071,13 @@ var CardCollection = ({
1054
1071
  Container,
1055
1072
  {
1056
1073
  ref: container,
1057
- className: clsx22(CardCollection_module_default["card-collection"], CardCollection_module_default[variant], className),
1074
+ className: clsx23(CardCollection_module_default["card-collection"], CardCollection_module_default[variant], className),
1058
1075
  children: [
1059
1076
  /* @__PURE__ */ jsxs("div", { className: CardCollection_module_default.content, children: [
1060
1077
  titleNode && /* @__PURE__ */ jsx("h2", { children: titleNode }),
1061
1078
  subtitleNode && /* @__PURE__ */ jsx("div", { className: "subheading", children: subtitleNode })
1062
1079
  ] }),
1063
- /* @__PURE__ */ jsx("div", { className: CardCollection_module_default.wrapper, children: /* @__PURE__ */ jsxs("div", { className: clsx22(CardCollection_module_default.cardWrapper, { [CardCollection_module_default["is-expanded"]]: isExpanded }), children: [
1080
+ /* @__PURE__ */ jsx("div", { className: CardCollection_module_default.wrapper, children: /* @__PURE__ */ jsxs("div", { className: clsx23(CardCollection_module_default.cardWrapper, { [CardCollection_module_default["is-expanded"]]: isExpanded }), children: [
1064
1081
  visibleCards.map((card, key) => /* @__PURE__ */ jsx(Card2, __spreadValues({ className: CardCollection_module_default.card, variant: theme }, card), key)),
1065
1082
  isExamCard && hiddenCards.length > 0 && /* @__PURE__ */ jsx("div", { ref: revealWrapper, className: CardCollection_module_default["reveal-wrapper"], children: /* @__PURE__ */ jsx("div", { className: CardCollection_module_default["reveal-inner"], children: hiddenCards.map((card, key) => /* @__PURE__ */ jsx(
1066
1083
  Card2,
@@ -1161,7 +1178,7 @@ var ContactModule = ({
1161
1178
  },
1162
1179
  { scope: containerRef, dependencies: [blurred, animateBlur] }
1163
1180
  );
1164
- return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: clsx22(ContactModule_module_default["contact-module"], className), children: [
1181
+ return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: clsx23(ContactModule_module_default["contact-module"], className), children: [
1165
1182
  blurred && /* @__PURE__ */ jsx(
1166
1183
  "div",
1167
1184
  {
@@ -1176,8 +1193,8 @@ var ContactModule = ({
1176
1193
  /* @__PURE__ */ jsxs(Container, { className: ContactModule_module_default.container, children: [
1177
1194
  /* @__PURE__ */ jsxs("div", { className: ContactModule_module_default.wrapper, children: [
1178
1195
  /* @__PURE__ */ jsxs("div", { className: ContactModule_module_default.content, children: [
1179
- titleNode && /* @__PURE__ */ jsx("div", { className: clsx22(ContactModule_module_default.title, "h1"), children: titleNode }),
1180
- subtitleNode && /* @__PURE__ */ jsx("div", { className: clsx22(ContactModule_module_default.subtitle, "subheading"), children: subtitleNode })
1196
+ titleNode && /* @__PURE__ */ jsx("div", { className: clsx23(ContactModule_module_default.title, "h1"), children: titleNode }),
1197
+ subtitleNode && /* @__PURE__ */ jsx("div", { className: clsx23(ContactModule_module_default.subtitle, "subheading"), children: subtitleNode })
1181
1198
  ] }),
1182
1199
  /* @__PURE__ */ jsx("div", { className: ContactModule_module_default["cta-wrapper"], children: ctas == null ? void 0 : ctas.map((cta, key) => /* @__PURE__ */ jsx(
1183
1200
  Button,
@@ -1238,7 +1255,7 @@ var Footer = ({
1238
1255
  disclaimer: FooterDisclaimer
1239
1256
  });
1240
1257
  const titleNode = (_a = slots.disclaimer) != null ? _a : disclaimer;
1241
- return /* @__PURE__ */ jsx("footer", { className: clsx22(Footer_module_default.footer, className), children: /* @__PURE__ */ jsxs(Container, { className: Footer_module_default.container, children: [
1258
+ return /* @__PURE__ */ jsx("footer", { className: clsx23(Footer_module_default.footer, className), children: /* @__PURE__ */ jsxs(Container, { className: Footer_module_default.container, children: [
1242
1259
  /* @__PURE__ */ jsxs("div", { className: Footer_module_default.bottom, children: [
1243
1260
  /* @__PURE__ */ jsxs("div", { className: Footer_module_default["bottom-left"], children: [
1244
1261
  supporters.length > 0 && /* @__PURE__ */ jsx("div", { className: Footer_module_default.supporters, children: /* @__PURE__ */ jsx("div", { className: Footer_module_default["supporters-logos"], children: supporters.map(
@@ -1254,7 +1271,7 @@ var Footer = ({
1254
1271
  index
1255
1272
  ) : /* @__PURE__ */ jsx("div", { className: Footer_module_default["supporter-link-primary"], children: /* @__PURE__ */ jsx(Picture, __spreadValues({}, supporter.image)) }, index)
1256
1273
  ) }) }),
1257
- titleNode && /* @__PURE__ */ jsx("div", { className: clsx22(Footer_module_default.disclaimer, "p"), children: titleNode }),
1274
+ titleNode && /* @__PURE__ */ jsx("div", { className: clsx23(Footer_module_default.disclaimer, "p"), children: titleNode }),
1258
1275
  copyright && /* @__PURE__ */ jsx("p", { className: Footer_module_default.copyright, children: copyright })
1259
1276
  ] }),
1260
1277
  columns.length > 0 && /* @__PURE__ */ jsx("nav", { className: Footer_module_default["bottom-right"], children: columns.map((column, colIndex) => /* @__PURE__ */ jsx("ul", { className: Footer_module_default["nav-list"], children: column.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
@@ -1270,6 +1287,12 @@ var Footer = ({
1270
1287
  children
1271
1288
  ] }) });
1272
1289
  };
1290
+ var Text = (_a) => {
1291
+ var _b = _a, { tag = "p", promoteToH1 = false, ref, children } = _b, props = __objRest(_b, ["tag", "promoteToH1", "ref", "children"]);
1292
+ const Component = promoteToH1 ? "h1" : tag;
1293
+ return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({ ref }, props), { children }));
1294
+ };
1295
+ Text.displayName = "Text";
1273
1296
  var HeroBannerTitle = ({ children }) => {
1274
1297
  return /* @__PURE__ */ jsx(Fragment, { children });
1275
1298
  };
@@ -1280,26 +1303,23 @@ var HeroBannerSubtitle = ({ children }) => {
1280
1303
  // src/widgets/HeroBanner/HeroBanner.module.scss
1281
1304
  var HeroBanner_module_default = {
1282
1305
  heroBanner: "HeroBanner_module_heroBanner",
1283
- pageHeroBanner: "HeroBanner_module_pageHeroBanner",
1284
1306
  container: "HeroBanner_module_container",
1285
- bannerPodcast: "HeroBanner_module_bannerPodcast",
1286
1307
  banner: "HeroBanner_module_banner",
1287
1308
  text: "HeroBanner_module_text",
1309
+ titleLogo: "HeroBanner_module_titleLogo",
1288
1310
  title: "HeroBanner_module_title",
1289
1311
  subtitle: "HeroBanner_module_subtitle",
1290
- logoWrapper: "HeroBanner_module_logoWrapper",
1291
- logo: "HeroBanner_module_logo",
1292
- horizontalGradient: "HeroBanner_module_horizontalGradient",
1293
- lensCrafters: "HeroBanner_module_lensCrafters",
1294
- forEyes: "HeroBanner_module_forEyes",
1295
- optical: "HeroBanner_module_optical",
1296
- pearleVision: "HeroBanner_module_pearleVision",
1297
1312
  ctaContainer: "HeroBanner_module_ctaContainer",
1298
1313
  brandsStrip: "HeroBanner_module_brandsStrip",
1299
1314
  backgroundImage: "HeroBanner_module_backgroundImage",
1300
1315
  scrollDown: "HeroBanner_module_scrollDown",
1301
1316
  arrow: "HeroBanner_module_arrow",
1302
- mainHeroBanner: "HeroBanner_module_mainHeroBanner"
1317
+ mainHeroBanner: "HeroBanner_module_mainHeroBanner",
1318
+ bannerPodcast: "HeroBanner_module_bannerPodcast",
1319
+ logoWrapper: "HeroBanner_module_logoWrapper",
1320
+ logo: "HeroBanner_module_logo",
1321
+ horizontalGradient: "HeroBanner_module_horizontalGradient",
1322
+ logoBar: "HeroBanner_module_logoBar"
1303
1323
  };
1304
1324
  var HeroBanner = ({
1305
1325
  className,
@@ -1309,7 +1329,9 @@ var HeroBanner = ({
1309
1329
  backgroundImage,
1310
1330
  logo,
1311
1331
  cta,
1332
+ ctaLogo,
1312
1333
  brands,
1334
+ promoteToH1,
1313
1335
  children
1314
1336
  }) => {
1315
1337
  var _a, _b;
@@ -1317,18 +1339,42 @@ var HeroBanner = ({
1317
1339
  const isTabletBelow = is("tablet", "below");
1318
1340
  const vPageHeroBanner = variant === "pageHeroBanner";
1319
1341
  const vBannerPodcast = variant === "bannerPodcast";
1342
+ const isTitleLogo = (logo == null ? void 0 : logo.variant) === "titleLogo";
1343
+ const GRADIENT_BANDS = [
1344
+ { color: "var(--color-lenscrafter-blue)" },
1345
+ { color: "var(--color-foreyes-brown)" },
1346
+ { color: "var(--color-targetoptical-red)" },
1347
+ { color: "var(--color-pearlevision-green)" }
1348
+ ];
1320
1349
  const slots = resolveCompoundSlots(children, {
1321
1350
  title: HeroBannerTitle,
1322
1351
  subtitle: HeroBannerSubtitle
1323
1352
  });
1324
1353
  const titleNode = (_a = slots.title) != null ? _a : title;
1325
1354
  const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
1326
- return /* @__PURE__ */ jsxs("div", { className: clsx22(HeroBanner_module_default.heroBanner, HeroBanner_module_default[variant], className), children: [
1355
+ return /* @__PURE__ */ jsxs("div", { className: clsx23(HeroBanner_module_default.heroBanner, HeroBanner_module_default[variant], className), children: [
1327
1356
  /* @__PURE__ */ jsxs("div", { className: HeroBanner_module_default.container, children: [
1328
1357
  /* @__PURE__ */ jsxs("div", { className: HeroBanner_module_default.banner, children: [
1329
1358
  (titleNode || subtitleNode) && /* @__PURE__ */ jsxs("div", { className: HeroBanner_module_default.text, children: [
1330
- titleNode && /* @__PURE__ */ jsx("h1", { className: clsx22(HeroBanner_module_default.title, "h1"), children: titleNode }),
1331
- subtitleNode && /* @__PURE__ */ jsx("div", { className: clsx22(HeroBanner_module_default.subtitle, "subtitle"), children: subtitleNode })
1359
+ isTitleLogo && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: HeroBanner_module_default.titleLogo }, logo)),
1360
+ titleNode && /* @__PURE__ */ jsx(
1361
+ Text,
1362
+ {
1363
+ tag: "h2",
1364
+ promoteToH1,
1365
+ className: clsx23(HeroBanner_module_default.title, vBannerPodcast ? "h3" : "h1"),
1366
+ children: titleNode
1367
+ }
1368
+ ),
1369
+ subtitleNode && /* @__PURE__ */ jsx(
1370
+ Text,
1371
+ {
1372
+ tag: "div",
1373
+ promoteToH1: promoteToH1 && !titleNode,
1374
+ className: clsx23(HeroBanner_module_default.subtitle, "subheading"),
1375
+ children: subtitleNode
1376
+ }
1377
+ )
1332
1378
  ] }),
1333
1379
  cta && cta.length > 0 && !vBannerPodcast && /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.ctaContainer, children: cta.slice(0, 2).map((cta2, key) => {
1334
1380
  return /* @__PURE__ */ jsx(
@@ -1343,9 +1389,10 @@ var HeroBanner = ({
1343
1389
  },
1344
1390
  key
1345
1391
  );
1346
- }) })
1392
+ }) }),
1393
+ ctaLogo && ctaLogo.length > 0 && vBannerPodcast && /* @__PURE__ */ jsx(LogoBar, { items: ctaLogo, className: HeroBanner_module_default.logoBar })
1347
1394
  ] }),
1348
- /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.logoWrapper, children: logo && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: HeroBanner_module_default.logo }, logo)) }),
1395
+ logo && !isTitleLogo && /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.logoWrapper, children: /* @__PURE__ */ jsx(Picture, __spreadValues({ className: HeroBanner_module_default.logo }, logo)) }),
1349
1396
  !vBannerPodcast && /* @__PURE__ */ jsx(
1350
1397
  BrandsStrip,
1351
1398
  __spreadValues({
@@ -1354,14 +1401,9 @@ var HeroBanner = ({
1354
1401
  size: isTabletBelow || vPageHeroBanner ? "small" : void 0
1355
1402
  }, brands)
1356
1403
  ),
1357
- backgroundImage && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: HeroBanner_module_default.backgroundImage }, backgroundImage))
1358
- ] }),
1359
- /* @__PURE__ */ jsxs("div", { className: HeroBanner_module_default.horizontalGradient, children: [
1360
- /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.lensCrafters }),
1361
- /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.forEyes }),
1362
- /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.optical }),
1363
- /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.pearleVision })
1404
+ backgroundImage && !vBannerPodcast && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: HeroBanner_module_default.backgroundImage }, backgroundImage))
1364
1405
  ] }),
1406
+ vBannerPodcast && /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.horizontalGradient, children: GRADIENT_BANDS.map((band, index) => /* @__PURE__ */ jsx("div", { style: { backgroundColor: band.color } }, index)) }),
1365
1407
  !vBannerPodcast && /* @__PURE__ */ jsx("div", { className: HeroBanner_module_default.scrollDown, children: /* @__PURE__ */ jsx(Icon, { type: "downChevronBlack", className: HeroBanner_module_default.arrow }) })
1366
1408
  ] });
1367
1409
  };
@@ -1406,7 +1448,7 @@ var HeroBannerCarousel = ({
1406
1448
  const [swiperInstance, setSwiperInstance] = useState(null);
1407
1449
  const [activeIndex, setActiveIndex] = useState(0);
1408
1450
  if (!items.length) return null;
1409
- return /* @__PURE__ */ jsx("div", { className: clsx22(HeroBannerCarousel_module_default.heroBannerCarousel, className), children: /* @__PURE__ */ jsxs("div", { className: HeroBannerCarousel_module_default.inner, children: [
1451
+ return /* @__PURE__ */ jsx("div", { className: clsx23(HeroBannerCarousel_module_default.heroBannerCarousel, className), children: /* @__PURE__ */ jsxs("div", { className: HeroBannerCarousel_module_default.inner, children: [
1410
1452
  /* @__PURE__ */ jsx("div", { className: HeroBannerCarousel_module_default.swiperContainer, children: /* @__PURE__ */ jsx(
1411
1453
  Swiper,
1412
1454
  {
@@ -1453,7 +1495,7 @@ var HeroBannerCarousel = ({
1453
1495
  /* @__PURE__ */ jsx("div", { className: HeroBannerCarousel_module_default.pagination, children: items.map((_, index) => /* @__PURE__ */ jsx(
1454
1496
  "button",
1455
1497
  {
1456
- className: clsx22(HeroBannerCarousel_module_default.dot, index === activeIndex && HeroBannerCarousel_module_default.dotActive),
1498
+ className: clsx23(HeroBannerCarousel_module_default.dot, index === activeIndex && HeroBannerCarousel_module_default.dotActive),
1457
1499
  onClick: () => swiperInstance == null ? void 0 : swiperInstance.slideTo(index),
1458
1500
  "aria-label": `Go to slide ${index + 1}`
1459
1501
  },
@@ -1472,12 +1514,6 @@ var HeroBannerCarousel = ({
1472
1514
  ] })
1473
1515
  ] }) });
1474
1516
  };
1475
- var Text = (_a) => {
1476
- var _b = _a, { tag = "p", promoteToH1 = false, ref, children } = _b, props = __objRest(_b, ["tag", "promoteToH1", "ref", "children"]);
1477
- const Component = promoteToH1 ? "h1" : tag;
1478
- return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({ ref }, props), { children }));
1479
- };
1480
- Text.displayName = "Text";
1481
1517
 
1482
1518
  // src/components/Accordion/Accordion.module.scss
1483
1519
  var Accordion_module_default = {
@@ -1539,7 +1575,7 @@ var AccordionItem = ({
1539
1575
  return /* @__PURE__ */ jsxs(
1540
1576
  "div",
1541
1577
  {
1542
- className: clsx22(
1578
+ className: clsx23(
1543
1579
  Accordion_module_default.accordionItem,
1544
1580
  {
1545
1581
  [Accordion_module_default.accordionItemOpen]: isOpen
@@ -1550,18 +1586,18 @@ var AccordionItem = ({
1550
1586
  /* @__PURE__ */ jsxs(
1551
1587
  "button",
1552
1588
  {
1553
- className: clsx22(Accordion_module_default.accordionHeader, {
1589
+ className: clsx23(Accordion_module_default.accordionHeader, {
1554
1590
  [Accordion_module_default.accordionHeaderOpen]: isOpen
1555
1591
  }),
1556
1592
  onClick: handleToggle,
1557
1593
  "aria-expanded": isOpen,
1558
1594
  "aria-label": `Toggle ${title}`,
1559
1595
  children: [
1560
- /* @__PURE__ */ jsx("div", { className: Accordion_module_default.accordionHeaderLeft, children: /* @__PURE__ */ jsx("span", { className: clsx22("body", Accordion_module_default.accordionTitle), children: title }) }),
1596
+ /* @__PURE__ */ jsx("div", { className: Accordion_module_default.accordionHeaderLeft, children: /* @__PURE__ */ jsx("span", { className: clsx23("body", Accordion_module_default.accordionTitle), children: title }) }),
1561
1597
  /* @__PURE__ */ jsx(
1562
1598
  "span",
1563
1599
  {
1564
- className: clsx22(Accordion_module_default.accordionChevron, {
1600
+ className: clsx23(Accordion_module_default.accordionChevron, {
1565
1601
  [Accordion_module_default.accordionChevronOpen]: isOpen
1566
1602
  }),
1567
1603
  children: isOpen ? /* @__PURE__ */ jsx(Icon, { type: "filledChevronUpBlack", size: 40 }) : /* @__PURE__ */ jsx(Icon, { type: "circleChevronDown", size: 40 })
@@ -1613,7 +1649,7 @@ var Accordion = ({
1613
1649
  if (items.length === 0) {
1614
1650
  return null;
1615
1651
  }
1616
- return /* @__PURE__ */ jsx("div", { className: clsx22(Accordion_module_default.accordion, className), children: items.map((item) => /* @__PURE__ */ jsx(
1652
+ return /* @__PURE__ */ jsx("div", { className: clsx23(Accordion_module_default.accordion, className), children: items.map((item) => /* @__PURE__ */ jsx(
1617
1653
  AccordionItem,
1618
1654
  {
1619
1655
  id: item.id,
@@ -1703,7 +1739,7 @@ var InternalBrandsTab = (props) => {
1703
1739
  };
1704
1740
  })) || [];
1705
1741
  }, [tabs]);
1706
- return /* @__PURE__ */ jsxs(Container, { className: clsx22(InternalBrandsTab_module_default.internalBrandsTab, className), children: [
1742
+ return /* @__PURE__ */ jsxs(Container, { className: clsx23(InternalBrandsTab_module_default.internalBrandsTab, className), children: [
1707
1743
  /* @__PURE__ */ jsxs("div", { className: InternalBrandsTab_module_default.textsContainer, children: [
1708
1744
  title && /* @__PURE__ */ jsx(Text, { tag: "h2", className: InternalBrandsTab_module_default.title, children: title }),
1709
1745
  subTitle && /* @__PURE__ */ jsx("div", { className: InternalBrandsTab_module_default.subTitle, children: subTitle })
@@ -1719,7 +1755,7 @@ var InternalBrandsTab = (props) => {
1719
1755
  },
1720
1756
  index
1721
1757
  )) }),
1722
- /* @__PURE__ */ jsx("div", { className: clsx22(InternalBrandsTab_module_default.contentArea), children: ((_a = tabs == null ? void 0 : tabs[activeIndex]) == null ? void 0 : _a.topContent) && /* @__PURE__ */ jsxs(Fragment, { children: [
1758
+ /* @__PURE__ */ jsx("div", { className: clsx23(InternalBrandsTab_module_default.contentArea), children: ((_a = tabs == null ? void 0 : tabs[activeIndex]) == null ? void 0 : _a.topContent) && /* @__PURE__ */ jsxs(Fragment, { children: [
1723
1759
  /* @__PURE__ */ jsxs("div", { className: InternalBrandsTab_module_default.topContent, children: [
1724
1760
  /* @__PURE__ */ jsxs("div", { children: [
1725
1761
  ((_b = tabs[activeIndex].topContent) == null ? void 0 : _b.title) && /* @__PURE__ */ jsx("p", { className: InternalBrandsTab_module_default.topContentTitle, children: (_c = tabs[activeIndex].topContent) == null ? void 0 : _c.title }),
@@ -1810,17 +1846,17 @@ var MiniBanner = ({
1810
1846
  const pretitleNode = (_a = slots.pretitle) != null ? _a : pretitle;
1811
1847
  const titleNode = (_b = slots.title) != null ? _b : title;
1812
1848
  const subtitleNode = (_c = slots.subtitle) != null ? _c : subtitle;
1813
- return /* @__PURE__ */ jsxs("div", { className: clsx22(MiniBanner_module_default.minibanner, MiniBanner_module_default[variant], className), children: [
1849
+ return /* @__PURE__ */ jsxs("div", { className: clsx23(MiniBanner_module_default.minibanner, MiniBanner_module_default[variant], className), children: [
1814
1850
  ((background == null ? void 0 : background.src) || ((_d = background == null ? void 0 : background.desktop) == null ? void 0 : _d.src) || ((_e = background == null ? void 0 : background.mobile) == null ? void 0 : _e.src)) && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: MiniBanner_module_default.background }, background)),
1815
1851
  /* @__PURE__ */ jsxs("div", { className: MiniBanner_module_default.wrapper, children: [
1816
1852
  /* @__PURE__ */ jsxs("div", { className: MiniBanner_module_default.textContainer, children: [
1817
1853
  (logo == null ? void 0 : logo.src) && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: MiniBanner_module_default.logo }, logo)),
1818
- pretitleNode && /* @__PURE__ */ jsx("div", { className: clsx22(MiniBanner_module_default.pretitle, "small"), children: pretitleNode }),
1819
- /* @__PURE__ */ jsx("div", { className: MiniBanner_module_default.headingWrapper, children: titleNode && /* @__PURE__ */ jsx("div", { className: clsx22(MiniBanner_module_default.title, isMiniBannerTextLeft ? "h1" : "h4"), children: titleNode }) }),
1854
+ pretitleNode && /* @__PURE__ */ jsx("div", { className: clsx23(MiniBanner_module_default.pretitle, "small"), children: pretitleNode }),
1855
+ /* @__PURE__ */ jsx("div", { className: MiniBanner_module_default.headingWrapper, children: titleNode && /* @__PURE__ */ jsx("div", { className: clsx23(MiniBanner_module_default.title, isMiniBannerTextLeft ? "h1" : "h4"), children: titleNode }) }),
1820
1856
  subtitleNode && /* @__PURE__ */ jsx(
1821
1857
  "div",
1822
1858
  {
1823
- className: clsx22(MiniBanner_module_default.title, {
1859
+ className: clsx23(MiniBanner_module_default.title, {
1824
1860
  subheading: isMiniBannerNoBG || isMiniBannerTextLeft,
1825
1861
  h1: !isMiniBannerNoBG && !isMiniBannerTextLeft
1826
1862
  }),
@@ -1891,14 +1927,14 @@ var MiniSectionCta = ({
1891
1927
  return /* @__PURE__ */ jsx(
1892
1928
  "div",
1893
1929
  {
1894
- className: clsx22(MiniSectionCta_module_default.miniSectionCta, MiniSectionCta_module_default[variant], theme && MiniSectionCta_module_default[theme], className),
1930
+ className: clsx23(MiniSectionCta_module_default.miniSectionCta, MiniSectionCta_module_default[variant], theme && MiniSectionCta_module_default[theme], className),
1895
1931
  children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs("div", { className: MiniSectionCta_module_default.wrapper, children: [
1896
1932
  /* @__PURE__ */ jsxs("div", { className: MiniSectionCta_module_default.col, children: [
1897
1933
  titleNode && /* @__PURE__ */ jsx("h2", { className: variant === "BgColorBlack" || variant === "BgColorGrey" ? "h3" : "h2", children: titleNode }),
1898
1934
  subtitleNode && /* @__PURE__ */ jsx(
1899
1935
  "div",
1900
1936
  {
1901
- className: clsx22(MiniSectionCta_module_default.subtitle, variant === "infoCallout" ? "h4" : "subheading"),
1937
+ className: clsx23(MiniSectionCta_module_default.subtitle, variant === "infoCallout" ? "h4" : "subheading"),
1902
1938
  children: subtitleNode
1903
1939
  }
1904
1940
  )
@@ -1963,7 +1999,7 @@ var PracticePathCards = ({
1963
1999
  const titleNode = (_a = slots.title) != null ? _a : title;
1964
2000
  const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
1965
2001
  const footerNode = (_c = slots.footer) != null ? _c : footer;
1966
- return /* @__PURE__ */ jsx("div", { className: clsx22(PracticePathCards_module_default["practice-path-cards"], className), children: /* @__PURE__ */ jsxs(Container, { className: PracticePathCards_module_default.container, children: [
2002
+ return /* @__PURE__ */ jsx("div", { className: clsx23(PracticePathCards_module_default["practice-path-cards"], className), children: /* @__PURE__ */ jsxs(Container, { className: PracticePathCards_module_default.container, children: [
1967
2003
  /* @__PURE__ */ jsxs("div", { className: PracticePathCards_module_default.wrapper, children: [
1968
2004
  /* @__PURE__ */ jsxs("div", { className: PracticePathCards_module_default.content, children: [
1969
2005
  titleNode && /* @__PURE__ */ jsx("h2", { children: titleNode }),
@@ -2017,8 +2053,8 @@ var Teaser5050With3Text = ({
2017
2053
  title: Teaser5050With3TextTitle
2018
2054
  });
2019
2055
  const titleNode = (_a = slots.title) != null ? _a : title;
2020
- return /* @__PURE__ */ jsx("div", { className: clsx22(Teaser5050With3Text_module_default["teaser5050-3text"], Teaser5050With3Text_module_default[variant], className), children: /* @__PURE__ */ jsxs(Container, { className: Teaser5050With3Text_module_default.container, children: [
2021
- titleNode && /* @__PURE__ */ jsx("div", { className: clsx22(Teaser5050With3Text_module_default.title, "h3"), children: titleNode }),
2056
+ return /* @__PURE__ */ jsx("div", { className: clsx23(Teaser5050With3Text_module_default["teaser5050-3text"], Teaser5050With3Text_module_default[variant], className), children: /* @__PURE__ */ jsxs(Container, { className: Teaser5050With3Text_module_default.container, children: [
2057
+ titleNode && /* @__PURE__ */ jsx("div", { className: clsx23(Teaser5050With3Text_module_default.title, "h3"), children: titleNode }),
2022
2058
  /* @__PURE__ */ jsxs("div", { className: Teaser5050With3Text_module_default.content, children: [
2023
2059
  /* @__PURE__ */ jsx("div", { className: Teaser5050With3Text_module_default.cards, children: cards == null ? void 0 : cards.map((card, key) => /* @__PURE__ */ jsx(InfoCard2, __spreadValues({}, card), key)) }),
2024
2060
  image && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: Teaser5050With3Text_module_default.image }, image))
@@ -2068,12 +2104,12 @@ var Teaser5050WithCta = ({
2068
2104
  return /* @__PURE__ */ jsx(
2069
2105
  "div",
2070
2106
  {
2071
- className: clsx22(Teaser5050WithCta_module_default.teaser5050, Teaser5050WithCta_module_default[variant], className),
2107
+ className: clsx23(Teaser5050WithCta_module_default.teaser5050, Teaser5050WithCta_module_default[variant], className),
2072
2108
  style: { backgroundColor: bgColor ? bgColor : "#ffffff" },
2073
2109
  children: /* @__PURE__ */ jsxs(Container, { className: Teaser5050WithCta_module_default.container, children: [
2074
2110
  /* @__PURE__ */ jsxs("div", { className: Teaser5050WithCta_module_default.wrapper, children: [
2075
2111
  /* @__PURE__ */ jsxs("div", { className: Teaser5050WithCta_module_default.content, children: [
2076
- titleNode && /* @__PURE__ */ jsx("div", { className: clsx22(Teaser5050WithCta_module_default.title, "h3"), children: titleNode }),
2112
+ titleNode && /* @__PURE__ */ jsx("div", { className: clsx23(Teaser5050WithCta_module_default.title, "h3"), children: titleNode }),
2077
2113
  subtitleNode && /* @__PURE__ */ jsx("div", { className: "subheading", children: subtitleNode })
2078
2114
  ] }),
2079
2115
  (ctas == null ? void 0 : ctas.length) && /* @__PURE__ */ jsx("div", { className: Teaser5050WithCta_module_default.ctaWrapper, children: ctas.map((cta, key) => /* @__PURE__ */ jsx(
@@ -2137,7 +2173,7 @@ var UpcomingEventCard = ({
2137
2173
  return /* @__PURE__ */ jsxs(
2138
2174
  "article",
2139
2175
  {
2140
- className: clsx22(
2176
+ className: clsx23(
2141
2177
  "card",
2142
2178
  UpcomingEventCard_module_default["event-card"],
2143
2179
  UpcomingEventCard_module_default[direction],
@@ -2145,26 +2181,26 @@ var UpcomingEventCard = ({
2145
2181
  className
2146
2182
  ),
2147
2183
  children: [
2148
- /* @__PURE__ */ jsxs("div", { className: clsx22("card-content", UpcomingEventCard_module_default["event-card-content"]), children: [
2149
- showImage && image && /* @__PURE__ */ jsx(Picture, __spreadProps(__spreadValues({}, image), { className: clsx22("card-image", UpcomingEventCard_module_default["event-card-image"]) })),
2184
+ /* @__PURE__ */ jsxs("div", { className: clsx23("card-content", UpcomingEventCard_module_default["event-card-content"]), children: [
2185
+ showImage && image && /* @__PURE__ */ jsx(Picture, __spreadProps(__spreadValues({}, image), { className: clsx23("card-image", UpcomingEventCard_module_default["event-card-image"]) })),
2150
2186
  /* @__PURE__ */ jsxs(
2151
2187
  "div",
2152
2188
  {
2153
- className: clsx22(
2189
+ className: clsx23(
2154
2190
  "card-text-content",
2155
2191
  UpcomingEventCard_module_default["event-card-text-content"],
2156
2192
  (!showImage || !hasImage) && UpcomingEventCard_module_default["event-card-show-image"]
2157
2193
  ),
2158
2194
  children: [
2159
2195
  /* @__PURE__ */ jsx("span", { className: UpcomingEventCard_module_default.date, children: date }),
2160
- title && /* @__PURE__ */ jsx("h3", { className: clsx22("card-text-title"), children: title }),
2196
+ title && /* @__PURE__ */ jsx("h3", { className: clsx23("card-text-title"), children: title }),
2161
2197
  location && /* @__PURE__ */ jsx("span", { className: UpcomingEventCard_module_default.location, children: location }),
2162
- description && /* @__PURE__ */ jsx("div", { className: clsx22("card-text-description", UpcomingEventCard_module_default.description), children: description }),
2198
+ description && /* @__PURE__ */ jsx("div", { className: clsx23("card-text-description", UpcomingEventCard_module_default.description), children: description }),
2163
2199
  cta && cta.url && /* @__PURE__ */ jsx(
2164
2200
  Button,
2165
2201
  {
2166
2202
  variant: "secondary",
2167
- className: clsx22(
2203
+ className: clsx23(
2168
2204
  "card-cta",
2169
2205
  UpcomingEventCard_module_default["event-card-cta"],
2170
2206
  !hasCTAandImage && UpcomingEventCard_module_default.hidden
@@ -2183,12 +2219,12 @@ var UpcomingEventCard = ({
2183
2219
  cta && cta.url && /* @__PURE__ */ jsx(
2184
2220
  "div",
2185
2221
  {
2186
- className: clsx22("card-footer", UpcomingEventCard_module_default["event-card-footer"], hasImage && UpcomingEventCard_module_default.hidden),
2222
+ className: clsx23("card-footer", UpcomingEventCard_module_default["event-card-footer"], hasImage && UpcomingEventCard_module_default.hidden),
2187
2223
  children: /* @__PURE__ */ jsx(
2188
2224
  Button,
2189
2225
  {
2190
2226
  variant: "secondary",
2191
- className: clsx22("card-cta", UpcomingEventCard_module_default["event-card-cta"]),
2227
+ className: clsx23("card-cta", UpcomingEventCard_module_default["event-card-cta"]),
2192
2228
  fullWidth: isBelowMobile,
2193
2229
  href: cta.url,
2194
2230
  icon: cta.icon,
@@ -2225,7 +2261,7 @@ var Carousel = (_a) => {
2225
2261
  },
2226
2262
  role: "region",
2227
2263
  "aria-label": ariaLabel,
2228
- className: clsx22(Carousel_module_default.carousel, className),
2264
+ className: clsx23(Carousel_module_default.carousel, className),
2229
2265
  spaceBetween: 0,
2230
2266
  slidesPerView: "auto",
2231
2267
  modules: [FreeMode, A11y],
@@ -2235,7 +2271,7 @@ var Carousel = (_a) => {
2235
2271
  children: slides.map((slide, index) => /* @__PURE__ */ jsx(
2236
2272
  SwiperSlide,
2237
2273
  {
2238
- className: clsx22(Carousel_module_default["carousel-item"], props.slideClass),
2274
+ className: clsx23(Carousel_module_default["carousel-item"], props.slideClass),
2239
2275
  children: slide
2240
2276
  },
2241
2277
  index
@@ -2285,13 +2321,13 @@ var EventList = ({
2285
2321
  return /* @__PURE__ */ jsx(
2286
2322
  "div",
2287
2323
  {
2288
- className: clsx22("event-list-module", EventList_module_default["event-list-module"], className),
2324
+ className: clsx23("event-list-module", EventList_module_default["event-list-module"], className),
2289
2325
  style: {
2290
2326
  backgroundColor
2291
2327
  },
2292
- children: /* @__PURE__ */ jsxs(Container, { className: clsx22(EventList_module_default["event-list-container"]), children: [
2328
+ children: /* @__PURE__ */ jsxs(Container, { className: clsx23(EventList_module_default["event-list-container"]), children: [
2293
2329
  /* @__PURE__ */ jsxs("div", { className: EventList_module_default["event-list-header-container"], children: [
2294
- titleNode && /* @__PURE__ */ jsx("h2", { className: clsx22(EventList_module_default["event-list-title"]), children: titleNode }),
2330
+ titleNode && /* @__PURE__ */ jsx("h2", { className: clsx23(EventList_module_default["event-list-title"]), children: titleNode }),
2295
2331
  cta && cta.url && /* @__PURE__ */ jsx(
2296
2332
  Button,
2297
2333
  {
@@ -2308,7 +2344,7 @@ var EventList = ({
2308
2344
  Carousel,
2309
2345
  {
2310
2346
  "aria-label": "Upcoming events",
2311
- wrapperClass: clsx22(EventList_module_default["carousel-wrapper"], EventList_module_default[variant]),
2347
+ wrapperClass: clsx23(EventList_module_default["carousel-wrapper"], EventList_module_default[variant]),
2312
2348
  slideClass: EventList_module_default["carousel-list-item"],
2313
2349
  spaceBetween: 16,
2314
2350
  slides: items.map((item) => {
@@ -2316,7 +2352,7 @@ var EventList = ({
2316
2352
  return /* @__PURE__ */ jsx(
2317
2353
  UpcomingEventCard,
2318
2354
  __spreadValues({
2319
- className: clsx22(EventList_module_default["event-card"]),
2355
+ className: clsx23(EventList_module_default["event-card"]),
2320
2356
  direction: "vertical",
2321
2357
  showImage: false
2322
2358
  }, item),
@@ -2329,17 +2365,17 @@ var EventList = ({
2329
2365
  "ul",
2330
2366
  {
2331
2367
  "aria-label": "Upcoming events",
2332
- className: clsx22(EventList_module_default["event-list-wrapper"], EventList_module_default["horizontal"], EventList_module_default[variant]),
2368
+ className: clsx23(EventList_module_default["event-list-wrapper"], EventList_module_default["horizontal"], EventList_module_default[variant]),
2333
2369
  children: items == null ? void 0 : items.map((item, index) => {
2334
2370
  var _a2, _b, _c;
2335
2371
  return /* @__PURE__ */ jsx(
2336
2372
  "li",
2337
2373
  {
2338
- className: clsx22(EventList_module_default["card-list-item"]),
2374
+ className: clsx23(EventList_module_default["card-list-item"]),
2339
2375
  children: /* @__PURE__ */ jsx(
2340
2376
  UpcomingEventCard,
2341
2377
  __spreadProps(__spreadValues({}, item), {
2342
- className: clsx22(EventList_module_default["card-item"]),
2378
+ className: clsx23(EventList_module_default["card-item"]),
2343
2379
  showImage: false,
2344
2380
  direction: "vertical"
2345
2381
  })
@@ -2354,7 +2390,7 @@ var EventList = ({
2354
2390
  "ul",
2355
2391
  {
2356
2392
  "aria-label": "Upcoming events",
2357
- className: clsx22(EventList_module_default["event-list-wrapper"], EventList_module_default[listDirection]),
2393
+ className: clsx23(EventList_module_default["event-list-wrapper"], EventList_module_default[listDirection]),
2358
2394
  children: items == null ? void 0 : items.map((item, index) => {
2359
2395
  var _a2, _b, _c;
2360
2396
  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(UpcomingEventCard, __spreadProps(__spreadValues({}, item), { direction: cardDirection })) }, (_c = (_b = (_a2 = item.title) != null ? _a2 : item.date) != null ? _b : item.location) != null ? _c : index);
@@ -2401,9 +2437,9 @@ var TextEvent = (props) => {
2401
2437
  });
2402
2438
  const titleNode = (_a = slots.title) != null ? _a : title;
2403
2439
  const richTextNode = (_b = slots.richText) != null ? _b : richText;
2404
- return /* @__PURE__ */ jsxs(Container, { className: clsx22(TextEvent_module_default.textEvent, className), children: [
2440
+ return /* @__PURE__ */ jsxs(Container, { className: clsx23(TextEvent_module_default.textEvent, className), children: [
2405
2441
  /* @__PURE__ */ jsx(Text, { tag: "h2", className: TextEvent_module_default.title, children: titleNode }),
2406
- /* @__PURE__ */ jsx("div", { className: clsx22(TextEvent_module_default.richText, TextEvent_module_default[variant != null ? variant : ""]), children: richTextNode })
2442
+ /* @__PURE__ */ jsx("div", { className: clsx23(TextEvent_module_default.richText, TextEvent_module_default[variant != null ? variant : ""]), children: richTextNode })
2407
2443
  ] });
2408
2444
  };
2409
2445
 
@@ -2434,7 +2470,7 @@ var TextBody = (props) => {
2434
2470
  });
2435
2471
  const titleNode = (_a = slots.title) != null ? _a : title;
2436
2472
  const bodyNode = (_b = slots.body) != null ? _b : body;
2437
- return /* @__PURE__ */ jsxs(Container, { className: clsx22(TextBody_module_default.textBody, className), children: [
2473
+ return /* @__PURE__ */ jsxs(Container, { className: clsx23(TextBody_module_default.textBody, className), children: [
2438
2474
  titleNode && /* @__PURE__ */ jsx(Text, { tag: "h2", className: TextBody_module_default.title, children: titleNode }),
2439
2475
  /* @__PURE__ */ jsx("div", { className: TextBody_module_default.body, children: bodyNode })
2440
2476
  ] });
@@ -2477,7 +2513,7 @@ var TextCenterCtaInBottom = ({
2477
2513
  });
2478
2514
  const titleNode = (_a = slots.title) != null ? _a : title;
2479
2515
  const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
2480
- return /* @__PURE__ */ jsx("div", { className: clsx22(TextCenterCtaInBottom_module_default.textCenterCta, className), children: /* @__PURE__ */ jsxs(Container, { className: TextCenterCtaInBottom_module_default.container, children: [
2516
+ return /* @__PURE__ */ jsx("div", { className: clsx23(TextCenterCtaInBottom_module_default.textCenterCta, className), children: /* @__PURE__ */ jsxs(Container, { className: TextCenterCtaInBottom_module_default.container, children: [
2481
2517
  /* @__PURE__ */ jsxs("div", { className: TextCenterCtaInBottom_module_default.content, children: [
2482
2518
  titleNode && /* @__PURE__ */ jsx("div", { className: TextCenterCtaInBottom_module_default.title, children: titleNode }),
2483
2519
  subtitleNode && /* @__PURE__ */ jsx("div", { className: TextCenterCtaInBottom_module_default.subtitle, children: subtitleNode })
@@ -2485,7 +2521,7 @@ var TextCenterCtaInBottom = ({
2485
2521
  !!(ctas == null ? void 0 : ctas.length) && /* @__PURE__ */ jsx(
2486
2522
  "div",
2487
2523
  {
2488
- className: clsx22(
2524
+ className: clsx23(
2489
2525
  TextCenterCtaInBottom_module_default.ctaWrapper,
2490
2526
  ctas.every((cta) => !cta.label && cta.logo) && TextCenterCtaInBottom_module_default.iconOnly
2491
2527
  ),
@@ -2528,7 +2564,9 @@ var ResourcesGridList_module_default = {
2528
2564
  searchCollapse: "ResourcesGridList_module_searchCollapse",
2529
2565
  searchIconInner: "ResourcesGridList_module_searchIconInner",
2530
2566
  searchInput: "ResourcesGridList_module_searchInput",
2567
+ searchClear: "ResourcesGridList_module_searchClear",
2531
2568
  dropdownPanel: "ResourcesGridList_module_dropdownPanel",
2569
+ searchPanel: "ResourcesGridList_module_searchPanel",
2532
2570
  dropdownOption: "ResourcesGridList_module_dropdownOption",
2533
2571
  selected: "ResourcesGridList_module_selected",
2534
2572
  content: "ResourcesGridList_module_content",
@@ -2545,6 +2583,7 @@ var ResourcesGridList_module_default = {
2545
2583
  cardsArea: "ResourcesGridList_module_cardsArea",
2546
2584
  grid: "ResourcesGridList_module_grid",
2547
2585
  list: "ResourcesGridList_module_list",
2586
+ cardLink: "ResourcesGridList_module_cardLink",
2548
2587
  cardGrid: "ResourcesGridList_module_cardGrid",
2549
2588
  cardBody: "ResourcesGridList_module_cardBody",
2550
2589
  cardIconTitle: "ResourcesGridList_module_cardIconTitle",
@@ -2578,23 +2617,31 @@ function FilterBar({
2578
2617
  filterValue,
2579
2618
  onFilterChange,
2580
2619
  sortValue,
2581
- onSortChange
2620
+ onSortChange,
2621
+ searchValue,
2622
+ onSearchChange
2582
2623
  }) {
2583
2624
  const [openDropdown, setOpenDropdown] = useState(null);
2584
2625
  const [searchState, setSearchState] = useState("closed");
2585
- const [searchQuery, setSearchQuery] = useState("");
2586
2626
  const filterRef = useRef(null);
2587
2627
  const sortRef = useRef(null);
2628
+ const searchRef = useRef(null);
2588
2629
  const searchInputRef = useRef(null);
2589
2630
  const closeSearch = () => {
2590
2631
  setSearchState("closing");
2591
- setSearchQuery("");
2632
+ onSearchChange("");
2633
+ };
2634
+ const clearSearch = () => {
2635
+ var _a;
2636
+ onSearchChange("");
2637
+ (_a = searchInputRef.current) == null ? void 0 : _a.focus();
2592
2638
  };
2593
2639
  useEffect(() => {
2594
2640
  const handleMouseDown = (e) => {
2595
- var _a, _b;
2641
+ var _a, _b, _c;
2596
2642
  const target = e.target;
2597
- if (((_a = filterRef.current) == null ? void 0 : _a.contains(target)) || ((_b = sortRef.current) == null ? void 0 : _b.contains(target))) return;
2643
+ if (((_a = filterRef.current) == null ? void 0 : _a.contains(target)) || ((_b = sortRef.current) == null ? void 0 : _b.contains(target)) || ((_c = searchRef.current) == null ? void 0 : _c.contains(target)))
2644
+ return;
2598
2645
  setOpenDropdown(null);
2599
2646
  };
2600
2647
  document.addEventListener("mousedown", handleMouseDown);
@@ -2604,13 +2651,17 @@ function FilterBar({
2604
2651
  var _a;
2605
2652
  if (searchState === "open") (_a = searchInputRef.current) == null ? void 0 : _a.focus();
2606
2653
  }, [searchState]);
2654
+ useEffect(() => {
2655
+ var _a;
2656
+ if (openDropdown === "search") (_a = searchInputRef.current) == null ? void 0 : _a.focus();
2657
+ }, [openDropdown]);
2607
2658
  return /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.filterBar, children: [
2608
2659
  /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.viewToggle, children: [
2609
2660
  /* @__PURE__ */ jsxs(
2610
2661
  "button",
2611
2662
  {
2612
2663
  type: "button",
2613
- className: clsx22(ResourcesGridList_module_default.chip, view === "grid" && ResourcesGridList_module_default.active),
2664
+ className: clsx23(ResourcesGridList_module_default.chip, view === "grid" && ResourcesGridList_module_default.active),
2614
2665
  onClick: () => onViewChange("grid"),
2615
2666
  "aria-pressed": view === "grid",
2616
2667
  children: [
@@ -2623,7 +2674,7 @@ function FilterBar({
2623
2674
  "button",
2624
2675
  {
2625
2676
  type: "button",
2626
- className: clsx22(ResourcesGridList_module_default.chip, view === "list" && ResourcesGridList_module_default.active),
2677
+ className: clsx23(ResourcesGridList_module_default.chip, view === "list" && ResourcesGridList_module_default.active),
2627
2678
  onClick: () => onViewChange("list"),
2628
2679
  "aria-pressed": view === "list",
2629
2680
  children: [
@@ -2639,7 +2690,7 @@ function FilterBar({
2639
2690
  "button",
2640
2691
  {
2641
2692
  type: "button",
2642
- className: clsx22(ResourcesGridList_module_default.chip, filterValue !== "all" && ResourcesGridList_module_default.active),
2693
+ className: clsx23(ResourcesGridList_module_default.chip, filterValue !== "all" && ResourcesGridList_module_default.active),
2643
2694
  onClick: () => setOpenDropdown(openDropdown === "filter" ? null : "filter"),
2644
2695
  "aria-expanded": openDropdown === "filter",
2645
2696
  children: [
@@ -2654,7 +2705,7 @@ function FilterBar({
2654
2705
  type: "button",
2655
2706
  role: "option",
2656
2707
  "aria-selected": filterValue === opt.value,
2657
- className: clsx22(
2708
+ className: clsx23(
2658
2709
  ResourcesGridList_module_default.dropdownOption,
2659
2710
  filterValue === opt.value && ResourcesGridList_module_default.selected
2660
2711
  ),
@@ -2690,7 +2741,7 @@ function FilterBar({
2690
2741
  type: "button",
2691
2742
  role: "option",
2692
2743
  "aria-selected": sortValue === opt.value,
2693
- className: clsx22(
2744
+ className: clsx23(
2694
2745
  ResourcesGridList_module_default.dropdownOption,
2695
2746
  sortValue === opt.value && ResourcesGridList_module_default.selected
2696
2747
  ),
@@ -2703,17 +2754,21 @@ function FilterBar({
2703
2754
  opt.value
2704
2755
  )) })
2705
2756
  ] }),
2706
- searchState !== "closed" ? /* @__PURE__ */ jsxs(
2707
- "div",
2708
- {
2709
- className: clsx22(
2710
- ResourcesGridList_module_default.searchExpanded,
2711
- searchState === "closing" && ResourcesGridList_module_default.searchCollapsing
2757
+ isMobile ? (
2758
+ /* Mobile — popup panel, mirroring the Filter/Sort dropdowns */
2759
+ /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.dropdownWrapper, ref: searchRef, children: [
2760
+ /* @__PURE__ */ jsx(
2761
+ "button",
2762
+ {
2763
+ type: "button",
2764
+ className: clsx23(ResourcesGridList_module_default.chip, searchValue !== "" && ResourcesGridList_module_default.active),
2765
+ onClick: () => setOpenDropdown(openDropdown === "search" ? null : "search"),
2766
+ "aria-expanded": openDropdown === "search",
2767
+ "aria-label": "Search",
2768
+ children: /* @__PURE__ */ jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" })
2769
+ }
2712
2770
  ),
2713
- onAnimationEnd: () => {
2714
- if (searchState === "closing") setSearchState("closed");
2715
- },
2716
- children: [
2771
+ openDropdown === "search" && /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.searchPanel, children: [
2717
2772
  /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.searchIconInner, children: /* @__PURE__ */ jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }) }),
2718
2773
  /* @__PURE__ */ jsx(
2719
2774
  "input",
@@ -2722,24 +2777,90 @@ function FilterBar({
2722
2777
  type: "text",
2723
2778
  className: ResourcesGridList_module_default.searchInput,
2724
2779
  placeholder: "Search\u2026",
2725
- value: searchQuery,
2726
- onChange: (e) => setSearchQuery(e.target.value),
2780
+ value: searchValue,
2781
+ onChange: (e) => onSearchChange(e.target.value),
2727
2782
  onKeyDown: (e) => {
2728
- if (e.key === "Escape") closeSearch();
2729
- },
2730
- onBlur: closeSearch
2783
+ if (e.key === "Escape") {
2784
+ if (searchValue) clearSearch();
2785
+ else setOpenDropdown(null);
2786
+ }
2787
+ }
2788
+ }
2789
+ ),
2790
+ searchValue && /* @__PURE__ */ jsx(
2791
+ "button",
2792
+ {
2793
+ type: "button",
2794
+ className: ResourcesGridList_module_default.searchClear,
2795
+ "aria-label": "Clear search",
2796
+ onClick: clearSearch,
2797
+ children: /* @__PURE__ */ jsx(Icon, { type: "xBlack", size: 16, "aria-hidden": "true" })
2731
2798
  }
2732
2799
  )
2733
- ]
2734
- }
2800
+ ] })
2801
+ ] })
2802
+ ) : searchState !== "closed" ? (
2803
+ /* Desktop — animated inline expand */
2804
+ /* @__PURE__ */ jsxs(
2805
+ "div",
2806
+ {
2807
+ className: clsx23(
2808
+ ResourcesGridList_module_default.searchExpanded,
2809
+ searchState === "closing" && ResourcesGridList_module_default.searchCollapsing
2810
+ ),
2811
+ onAnimationEnd: () => {
2812
+ if (searchState === "closing") setSearchState("closed");
2813
+ },
2814
+ children: [
2815
+ /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.searchIconInner, children: /* @__PURE__ */ jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }) }),
2816
+ /* @__PURE__ */ jsx(
2817
+ "input",
2818
+ {
2819
+ ref: searchInputRef,
2820
+ type: "text",
2821
+ className: ResourcesGridList_module_default.searchInput,
2822
+ placeholder: "Search\u2026",
2823
+ value: searchValue,
2824
+ onChange: (e) => onSearchChange(e.target.value),
2825
+ onKeyDown: (e) => {
2826
+ if (e.key === "Escape") {
2827
+ if (searchValue) clearSearch();
2828
+ else closeSearch();
2829
+ }
2830
+ },
2831
+ onBlur: () => {
2832
+ if (!searchValue) closeSearch();
2833
+ }
2834
+ }
2835
+ ),
2836
+ searchValue && /* @__PURE__ */ jsx(
2837
+ "button",
2838
+ {
2839
+ type: "button",
2840
+ className: ResourcesGridList_module_default.searchClear,
2841
+ "aria-label": "Clear search",
2842
+ onMouseDown: (e) => e.preventDefault(),
2843
+ onClick: clearSearch,
2844
+ children: /* @__PURE__ */ jsx(Icon, { type: "xBlack", size: 16, "aria-hidden": "true" })
2845
+ }
2846
+ )
2847
+ ]
2848
+ }
2849
+ )
2735
2850
  ) : /* @__PURE__ */ jsxs("button", { type: "button", className: ResourcesGridList_module_default.chip, onClick: () => setSearchState("open"), children: [
2736
2851
  /* @__PURE__ */ jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }),
2737
- !isMobile && /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.chipLabel, children: "Search" })
2852
+ /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.chipLabel, children: "Search" })
2738
2853
  ] })
2739
2854
  ] })
2740
2855
  ] });
2741
2856
  }
2742
- var Sidebar = ({ categories, isMobile, onToggle }) => {
2857
+ var Sidebar = ({
2858
+ categories,
2859
+ isMobile,
2860
+ onToggle,
2861
+ selectedIndex,
2862
+ onSelect
2863
+ }) => {
2743
2864
  if (isMobile) {
2744
2865
  return /* @__PURE__ */ jsx("div", { className: ResourcesGridList_module_default.sidebarMobile, children: /* @__PURE__ */ jsx(
2745
2866
  "button",
@@ -2757,7 +2878,17 @@ var Sidebar = ({ categories, isMobile, onToggle }) => {
2757
2878
  return /* @__PURE__ */ jsxs(
2758
2879
  "li",
2759
2880
  {
2760
- className: clsx22(ResourcesGridList_module_default.sidebarItem, cat.active && ResourcesGridList_module_default.active),
2881
+ className: clsx23(ResourcesGridList_module_default.sidebarItem, i === selectedIndex && ResourcesGridList_module_default.active),
2882
+ role: "button",
2883
+ tabIndex: 0,
2884
+ "aria-pressed": i === selectedIndex,
2885
+ onClick: () => onSelect(i),
2886
+ onKeyDown: (e) => {
2887
+ if (e.key === "Enter" || e.key === " ") {
2888
+ e.preventDefault();
2889
+ onSelect(i);
2890
+ }
2891
+ },
2761
2892
  children: [
2762
2893
  /* @__PURE__ */ jsx("span", { children: cat.label }),
2763
2894
  cat.hasNotification && /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" })
@@ -2767,14 +2898,19 @@ var Sidebar = ({ categories, isMobile, onToggle }) => {
2767
2898
  );
2768
2899
  }) }) });
2769
2900
  };
2770
- var ResourceIcon = ({ type }) => /* @__PURE__ */ jsx("div", { className: ResourcesGridList_module_default.iconWrapper, children: /* @__PURE__ */ jsx(Icon, { type: type === "pdf" ? "pdf" : "externalLink", size: 32, "aria-hidden": "true" }) });
2901
+ var ResourceIcon = ({ image, type }) => {
2902
+ if (!image) return null;
2903
+ return /* @__PURE__ */ jsx("div", { className: ResourcesGridList_module_default.iconWrapper, children: /* @__PURE__ */ jsx("img", { src: image, alt: type != null ? type : "", width: 32, height: 32 }) });
2904
+ };
2771
2905
  var ResourceCardItem = ({ item, view }) => {
2906
+ const hasHref = Boolean(item.href);
2907
+ const linkWrapper = ({ children }) => /* @__PURE__ */ jsx("a", { href: item.href, className: ResourcesGridList_module_default.cardLink, target: "_blank", rel: "noopener noreferrer", children });
2772
2908
  if (view === "grid") {
2773
2909
  return /* @__PURE__ */ jsx("article", { className: ResourcesGridList_module_default.cardGrid, children: /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.cardBody, children: [
2774
- /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.cardIconTitle, children: [
2775
- /* @__PURE__ */ jsx(ResourceIcon, { type: item.type }),
2910
+ /* @__PURE__ */ jsx(ConditionalWrapper, { condition: hasHref, wrapper: linkWrapper, children: /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.cardIconTitle, children: [
2911
+ /* @__PURE__ */ jsx(ResourceIcon, { image: item.image, type: item.type }),
2776
2912
  /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.cardTitle, children: item.title })
2777
- ] }),
2913
+ ] }) }),
2778
2914
  /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.cardMeta, children: [
2779
2915
  /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.cardDate, children: item.date }),
2780
2916
  item.hasNotification && /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" })
@@ -2783,22 +2919,59 @@ var ResourceCardItem = ({ item, view }) => {
2783
2919
  }
2784
2920
  return /* @__PURE__ */ jsxs("article", { className: ResourcesGridList_module_default.cardList, children: [
2785
2921
  /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.cardListLeft, children: [
2786
- /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.cardDate, children: item.date }),
2787
- item.hasNotification && /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" })
2922
+ item.hasNotification && /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" }),
2923
+ /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.cardDate, children: item.date })
2788
2924
  ] }),
2789
- /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.cardListRight, children: [
2790
- /* @__PURE__ */ jsx(ResourceIcon, { type: item.type }),
2925
+ /* @__PURE__ */ jsx(ConditionalWrapper, { condition: hasHref, wrapper: linkWrapper, children: /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.cardListRight, children: [
2926
+ /* @__PURE__ */ jsx(ResourceIcon, { image: item.image, type: item.type }),
2791
2927
  /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.cardTitle, children: item.title })
2792
- ] })
2928
+ ] }) })
2793
2929
  ] });
2794
2930
  };
2795
- var Pagination3 = () => /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.pagination, "aria-label": "Pagination", children: [
2796
- /* @__PURE__ */ jsx("button", { type: "button", className: ResourcesGridList_module_default.pageArrow, "aria-label": "Previous page", children: /* @__PURE__ */ jsx(Icon, { type: "chevronLeftBlack", size: 32, "aria-hidden": "true" }) }),
2797
- /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.pageDotActive, "aria-current": "page" }),
2798
- /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.pageDot }),
2799
- /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.pageDot }),
2800
- /* @__PURE__ */ jsx("button", { type: "button", className: ResourcesGridList_module_default.pageArrow, "aria-label": "Next page", children: /* @__PURE__ */ jsx(Icon, { type: "chevronRightBlack", size: 32, "aria-hidden": "true" }) })
2801
- ] });
2931
+ var Pagination3 = ({ currentPage, totalPages, onPageChange }) => {
2932
+ const isFirst = currentPage <= 1;
2933
+ const isLast = currentPage >= totalPages;
2934
+ return /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.pagination, "aria-label": "Pagination", children: [
2935
+ /* @__PURE__ */ jsx(
2936
+ "button",
2937
+ {
2938
+ type: "button",
2939
+ className: ResourcesGridList_module_default.pageArrow,
2940
+ "aria-label": "Previous page",
2941
+ disabled: isFirst,
2942
+ onClick: () => onPageChange(currentPage - 1),
2943
+ children: /* @__PURE__ */ jsx(Icon, { type: "chevronLeftBlack", size: 32, "aria-hidden": "true" })
2944
+ }
2945
+ ),
2946
+ Array.from({ length: totalPages }, (_, i) => {
2947
+ const page = i + 1;
2948
+ const isActive = page === currentPage;
2949
+ return /* @__PURE__ */ jsx(
2950
+ "button",
2951
+ {
2952
+ type: "button",
2953
+ className: clsx23(isActive ? ResourcesGridList_module_default.pageDotActive : ResourcesGridList_module_default.pageDot),
2954
+ "aria-label": `Page ${page}`,
2955
+ "aria-current": isActive ? "page" : void 0,
2956
+ onClick: () => onPageChange(page)
2957
+ },
2958
+ page
2959
+ );
2960
+ }),
2961
+ /* @__PURE__ */ jsx(
2962
+ "button",
2963
+ {
2964
+ type: "button",
2965
+ className: ResourcesGridList_module_default.pageArrow,
2966
+ "aria-label": "Next page",
2967
+ disabled: isLast,
2968
+ onClick: () => onPageChange(currentPage + 1),
2969
+ children: /* @__PURE__ */ jsx(Icon, { type: "chevronRightBlack", size: 32, "aria-hidden": "true" })
2970
+ }
2971
+ )
2972
+ ] });
2973
+ };
2974
+ var ITEMS_PER_PAGE = 12;
2802
2975
  var ResourcesGridList = ({
2803
2976
  className,
2804
2977
  items = [],
@@ -2807,20 +2980,52 @@ var ResourcesGridList = ({
2807
2980
  defaultFilter = "all",
2808
2981
  defaultSort = "latest"
2809
2982
  }) => {
2983
+ var _a;
2810
2984
  const [view, setView] = useState(defaultView);
2811
2985
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
2812
2986
  const [filterValue, setFilterValue] = useState(defaultFilter);
2813
2987
  const [sortValue, setSortValue] = useState(defaultSort);
2988
+ const [searchQuery, setSearchQuery] = useState("");
2989
+ const [currentPage, setCurrentPage] = useState(1);
2990
+ const [selectedCategory, setSelectedCategory] = useState(() => {
2991
+ const activeIndex = categories.findIndex((cat) => cat.active);
2992
+ return activeIndex === -1 ? 0 : activeIndex;
2993
+ });
2814
2994
  const { is } = useViewPort_default();
2815
2995
  const isMobile = is("tablet", "below");
2816
- const displayedItems = [...items].filter((item) => filterValue === "all" || item.type === filterValue).sort((a, b) => {
2996
+ const selectedValue = (_a = categories[selectedCategory]) == null ? void 0 : _a.value;
2997
+ const handleSelectCategory = (index) => {
2998
+ setSelectedCategory(index);
2999
+ setCurrentPage(1);
3000
+ if (isMobile) setIsSidebarOpen(false);
3001
+ };
3002
+ const handleFilterChange = (value) => {
3003
+ setFilterValue(value);
3004
+ setCurrentPage(1);
3005
+ };
3006
+ const handleSortChange = (value) => {
3007
+ setSortValue(value);
3008
+ setCurrentPage(1);
3009
+ };
3010
+ const handleSearchChange = (value) => {
3011
+ setSearchQuery(value);
3012
+ setCurrentPage(1);
3013
+ };
3014
+ const displayedItems = [...items].filter((item) => filterValue === "all" || item.type === filterValue).filter((item) => selectedValue == null || item.category === selectedValue).filter((item) => {
3015
+ const q = searchQuery.trim().toLowerCase();
3016
+ return q === "" || item.title.toLowerCase().includes(q);
3017
+ }).sort((a, b) => {
2817
3018
  if (sortValue === "latest") return new Date(b.date).getTime() - new Date(a.date).getTime();
2818
3019
  if (sortValue === "oldest") return new Date(a.date).getTime() - new Date(b.date).getTime();
2819
3020
  if (sortValue === "az") return a.title.localeCompare(b.title);
2820
3021
  if (sortValue === "za") return b.title.localeCompare(a.title);
2821
3022
  return 0;
2822
3023
  });
2823
- return /* @__PURE__ */ jsxs("div", { className: clsx22(ResourcesGridList_module_default.widget, className), children: [
3024
+ const totalPages = Math.max(1, Math.ceil(displayedItems.length / ITEMS_PER_PAGE));
3025
+ const safeCurrentPage = Math.min(currentPage, totalPages);
3026
+ const pageStart = (safeCurrentPage - 1) * ITEMS_PER_PAGE;
3027
+ const paginatedItems = displayedItems.slice(pageStart, pageStart + ITEMS_PER_PAGE);
3028
+ return /* @__PURE__ */ jsxs("div", { className: clsx23(ResourcesGridList_module_default.widget, className), children: [
2824
3029
  /* @__PURE__ */ jsx(
2825
3030
  FilterBar,
2826
3031
  {
@@ -2828,33 +3033,48 @@ var ResourcesGridList = ({
2828
3033
  onViewChange: setView,
2829
3034
  isMobile,
2830
3035
  filterValue,
2831
- onFilterChange: setFilterValue,
3036
+ onFilterChange: handleFilterChange,
2832
3037
  sortValue,
2833
- onSortChange: setSortValue
3038
+ onSortChange: handleSortChange,
3039
+ searchValue: searchQuery,
3040
+ onSearchChange: handleSearchChange
2834
3041
  }
2835
3042
  ),
2836
3043
  /* @__PURE__ */ jsxs("div", { className: ResourcesGridList_module_default.content, children: [
2837
3044
  isMobile && /* @__PURE__ */ jsxs(
2838
3045
  "div",
2839
3046
  {
2840
- className: clsx22(
3047
+ className: clsx23(
2841
3048
  ResourcesGridList_module_default.mobileSidebarOverlay,
2842
3049
  isSidebarOpen && ResourcesGridList_module_default.mobileSidebarOverlayOpen
2843
3050
  ),
2844
3051
  "aria-hidden": !isSidebarOpen,
2845
3052
  children: [
2846
3053
  /* @__PURE__ */ jsx("nav", { className: ResourcesGridList_module_default.mobileCategoriesPanel, "aria-label": "Resource categories", children: /* @__PURE__ */ jsx("ul", { className: ResourcesGridList_module_default.mobileCategoriesList, children: categories.map((cat, i) => {
2847
- var _a;
3054
+ var _a2;
2848
3055
  return /* @__PURE__ */ jsxs(
2849
3056
  "li",
2850
3057
  {
2851
- className: clsx22(ResourcesGridList_module_default.mobileSidebarItem, cat.active && ResourcesGridList_module_default.active),
3058
+ className: clsx23(
3059
+ ResourcesGridList_module_default.mobileSidebarItem,
3060
+ i === selectedCategory && ResourcesGridList_module_default.active
3061
+ ),
3062
+ role: "button",
3063
+ tabIndex: 0,
3064
+ "aria-pressed": i === selectedCategory,
3065
+ onClick: () => handleSelectCategory(i),
3066
+ onKeyDown: (e) => {
3067
+ if (e.key === "Enter" || e.key === " ") {
3068
+ e.preventDefault();
3069
+ handleSelectCategory(i);
3070
+ }
3071
+ },
2852
3072
  children: [
2853
3073
  /* @__PURE__ */ jsx("span", { children: cat.label }),
2854
3074
  cat.hasNotification && /* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.notificationDot, "aria-label": "New" })
2855
3075
  ]
2856
3076
  },
2857
- (_a = cat.label) != null ? _a : i
3077
+ (_a2 = cat.label) != null ? _a2 : i
2858
3078
  );
2859
3079
  }) }) }),
2860
3080
  /* @__PURE__ */ jsx("div", { className: ResourcesGridList_module_default.mobileSidebarCloseColumn, children: /* @__PURE__ */ jsx(
@@ -2875,15 +3095,24 @@ var ResourcesGridList = ({
2875
3095
  {
2876
3096
  categories,
2877
3097
  isMobile,
2878
- onToggle: () => setIsSidebarOpen(true)
3098
+ onToggle: () => setIsSidebarOpen(true),
3099
+ selectedIndex: selectedCategory,
3100
+ onSelect: handleSelectCategory
2879
3101
  }
2880
3102
  ),
2881
- /* @__PURE__ */ jsx("div", { className: clsx22(ResourcesGridList_module_default.cardsArea, ResourcesGridList_module_default[view]), children: displayedItems.map((item, i) => {
2882
- var _a;
2883
- return /* @__PURE__ */ jsx(ResourceCardItem, { item, view }, (_a = item.title) != null ? _a : i);
3103
+ /* @__PURE__ */ jsx("div", { className: clsx23(ResourcesGridList_module_default.cardsArea, ResourcesGridList_module_default[view]), children: paginatedItems.map((item, i) => {
3104
+ var _a2;
3105
+ return /* @__PURE__ */ jsx(ResourceCardItem, { item, view }, (_a2 = item.title) != null ? _a2 : i);
2884
3106
  }) })
2885
3107
  ] }),
2886
- /* @__PURE__ */ jsx(Pagination3, {})
3108
+ totalPages > 1 && /* @__PURE__ */ jsx(
3109
+ Pagination3,
3110
+ {
3111
+ currentPage: safeCurrentPage,
3112
+ totalPages,
3113
+ onPageChange: setCurrentPage
3114
+ }
3115
+ )
2887
3116
  ] });
2888
3117
  };
2889
3118
  function useIntersectionObserver({
@@ -2915,6 +3144,6 @@ function useIntersectionObserver({
2915
3144
  return { observeRef, isVisible };
2916
3145
  }
2917
3146
 
2918
- export { Anchor, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, EventList2 as EventList, Footer, HeroBanner2 as HeroBanner, HeroBannerCarousel, Icon, InfoCard2 as InfoCard, InternalBrandsTab2 as InternalBrandsTab, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, ResourcesGridList, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, TextBody2 as TextBody, TextCenterCtaInBottom2 as TextCenterCtaInBottom, TextEvent2 as TextEvent, resolveCompoundSlots, svgs, useIntersectionObserver };
3147
+ export { Anchor, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, EventList2 as EventList, Footer, HeroBanner2 as HeroBanner, HeroBannerCarousel, Icon, InfoCard2 as InfoCard, InternalBrandsTab2 as InternalBrandsTab, LogoBar, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, ResourcesGridList, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, TextBody2 as TextBody, TextCenterCtaInBottom2 as TextCenterCtaInBottom, TextEvent2 as TextEvent, resolveCompoundSlots, svgs, useIntersectionObserver };
2919
3148
  //# sourceMappingURL=index.mjs.map
2920
3149
  //# sourceMappingURL=index.mjs.map