@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/LICENSE.txt +21 -21
- package/README.md +52 -52
- package/dist/index.cjs +389 -159
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +167 -59
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +28 -6
- package/dist/index.d.ts +28 -6
- package/dist/index.mjs +388 -159
- package/dist/index.mjs.map +1 -1
- package/dist/types/global.d.ts +25 -25
- package/package.json +100 -100
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
670
|
-
title && logos.length === 1 && /* @__PURE__ */ jsx("h2", { className:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
1180
|
-
subtitleNode && /* @__PURE__ */ jsx("div", { className:
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
-
|
|
1331
|
-
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
1819
|
-
/* @__PURE__ */ jsx("div", { className: MiniBanner_module_default.headingWrapper, children: titleNode && /* @__PURE__ */ jsx("div", { className:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
2021
|
-
titleNode && /* @__PURE__ */ jsx("div", { className:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
2149
|
-
showImage && image && /* @__PURE__ */ jsx(Picture, __spreadProps(__spreadValues({}, image), { className:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
2374
|
+
className: clsx23(EventList_module_default["card-list-item"]),
|
|
2339
2375
|
children: /* @__PURE__ */ jsx(
|
|
2340
2376
|
UpcomingEventCard,
|
|
2341
2377
|
__spreadProps(__spreadValues({}, item), {
|
|
2342
|
-
className:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
-
|
|
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)))
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
-
|
|
2707
|
-
|
|
2708
|
-
{
|
|
2709
|
-
|
|
2710
|
-
|
|
2711
|
-
|
|
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
|
-
|
|
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:
|
|
2726
|
-
onChange: (e) =>
|
|
2780
|
+
value: searchValue,
|
|
2781
|
+
onChange: (e) => onSearchChange(e.target.value),
|
|
2727
2782
|
onKeyDown: (e) => {
|
|
2728
|
-
if (e.key === "Escape")
|
|
2729
|
-
|
|
2730
|
-
|
|
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
|
-
|
|
2852
|
+
/* @__PURE__ */ jsx("span", { className: ResourcesGridList_module_default.chipLabel, children: "Search" })
|
|
2738
2853
|
] })
|
|
2739
2854
|
] })
|
|
2740
2855
|
] });
|
|
2741
2856
|
}
|
|
2742
|
-
var Sidebar = ({
|
|
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:
|
|
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 }) =>
|
|
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.
|
|
2787
|
-
|
|
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 = (
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
/* @__PURE__ */
|
|
2799
|
-
|
|
2800
|
-
|
|
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
|
|
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
|
-
|
|
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:
|
|
3036
|
+
onFilterChange: handleFilterChange,
|
|
2832
3037
|
sortValue,
|
|
2833
|
-
onSortChange:
|
|
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:
|
|
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
|
|
3054
|
+
var _a2;
|
|
2848
3055
|
return /* @__PURE__ */ jsxs(
|
|
2849
3056
|
"li",
|
|
2850
3057
|
{
|
|
2851
|
-
className:
|
|
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
|
-
(
|
|
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:
|
|
2882
|
-
var
|
|
2883
|
-
return /* @__PURE__ */ jsx(ResourceCardItem, { item, view }, (
|
|
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(
|
|
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
|