@deriv-web-design/ui 0.0.22 → 0.0.25

package/dist/index.js

@@ -217,11 +217,6 @@ var Tag = ({
 
 // primitives/Accordion/Accordion.tsx
 var import_react = require("react");
-
-// primitives/Accordion/Accordion.module.css
-var Accordion_default = {};
-
-// primitives/Accordion/Accordion.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var Accordion = ({
@@ -243,7 +238,7 @@ var Accordion = ({
     if (!isControlled) setInternalOpen(next);
     onToggle?.(next);
   };
-  const classNames = [Accordion_default.accordion, className ?? ""].filter(Boolean).join(" ");
+  const classNames = ["accordion", className ?? ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
@@ -256,17 +251,17 @@ var Accordion = ({
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "button",
           {
-            className: Accordion_default.header,
+            className: "accordion__header",
             onClick: handleToggle,
             "aria-expanded": isOpen,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: Accordion_default.titleWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: Accordion_default.title, children: title }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: [Accordion_default.chevron, isOpen ? Accordion_default.chevronRotated : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronIcon2, {}) }),
-              showFocusRing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: Accordion_default.focusRing, "aria-hidden": "true" })
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "accordion__title-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "accordion__title", children: title }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: ["accordion__chevron", isOpen ? "accordion__chevron--rotated" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronIcon2, {}) }),
+              showFocusRing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "accordion__focus-ring", "aria-hidden": "true" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: [Accordion_default.bodyWrapper, isOpen ? Accordion_default.bodyWrapperOpen : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: Accordion_default.bodyInner, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: Accordion_default.body, children }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: ["accordion__body-wrapper", isOpen ? "accordion__body-wrapper--open" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "accordion__body-inner", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "accordion__body", children }) }) })
       ]
     }
   );
@@ -1098,22 +1093,26 @@ var Tabs = ({
   );
 };
 
-// templates/FaqAccordion/FaqAccordion.module.css
-var FaqAccordion_default = {};
-
 // templates/FaqAccordion/FaqAccordion.tsx
+var import_react7 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var FaqAccordion = ({
   title,
   items,
   colorScheme = "white"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { className: [FaqAccordion_default.section, FaqAccordion_default[`section--${colorScheme}`]].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: FaqAccordion_default.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: FaqAccordion_default.header, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: FaqAccordion_default.title, children: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: FaqAccordion_default.list, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  const [openIndex, setOpenIndex] = (0, import_react7.useState)(null);
+  const handleToggle = (index) => (isOpen) => {
+    setOpenIndex(isOpen ? index : null);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { className: ["faq-accordion", `faq-accordion--${colorScheme}`].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "faq-accordion__container", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "faq-accordion__header", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "faq-accordion__title", children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "faq-accordion__list", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       Accordion,
       {
         title: item.question,
+        open: openIndex === index,
+        onToggle: handleToggle(index),
         showTopDivider: index === 0,
         showBottomDivider: true,
         children: item.answer
@@ -1340,12 +1339,9 @@ var FeatureCardsIcon = ({
   ] }) });
 };
 
-// templates/FeatureBullets/FeatureBullets.module.css
-var FeatureBullets_default = {};
-
 // templates/FeatureBullets/FeatureBullets.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var CheckIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", className: FeatureBullets_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M12 4.375C9.07031 4.375 6.41406 5.9375 4.92969 8.4375C3.48438 10.9766 3.48438 14.0625 4.92969 16.5625C6.41406 19.1016 9.07031 20.625 12 20.625C14.8906 20.625 17.5469 19.1016 19.0312 16.5625C20.4766 14.0625 20.4766 10.9766 19.0312 8.4375C17.5469 5.9375 14.8906 4.375 12 4.375ZM12 22.5C8.40625 22.5 5.125 20.625 3.32812 17.5C1.53125 14.4141 1.53125 10.625 3.32812 7.5C5.125 4.41406 8.40625 2.5 12 2.5C15.5547 2.5 18.8359 4.41406 20.6328 7.5C22.4297 10.625 22.4297 14.4141 20.6328 17.5C18.8359 20.625 15.5547 22.5 12 22.5ZM16.4141 10.6641L11.4141 15.6641C11.0234 16.0547 10.4375 16.0547 10.0859 15.6641L7.58594 13.1641C7.19531 12.8125 7.19531 12.2266 7.58594 11.875C7.9375 11.4844 8.52344 11.4844 8.91406 11.875L10.75 13.7109L15.0859 9.375C15.4375 8.98438 16.0234 8.98438 16.4141 9.375C16.7656 9.72656 16.7656 10.3125 16.4141 10.6641Z", fill: "currentColor" }) });
+var CheckIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", className: "feature-bullets__icon", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M12 4.375C9.07031 4.375 6.41406 5.9375 4.92969 8.4375C3.48438 10.9766 3.48438 14.0625 4.92969 16.5625C6.41406 19.1016 9.07031 20.625 12 20.625C14.8906 20.625 17.5469 19.1016 19.0312 16.5625C20.4766 14.0625 20.4766 10.9766 19.0312 8.4375C17.5469 5.9375 14.8906 4.375 12 4.375ZM12 22.5C8.40625 22.5 5.125 20.625 3.32812 17.5C1.53125 14.4141 1.53125 10.625 3.32812 7.5C5.125 4.41406 8.40625 2.5 12 2.5C15.5547 2.5 18.8359 4.41406 20.6328 7.5C22.4297 10.625 22.4297 14.4141 20.6328 17.5C18.8359 20.625 15.5547 22.5 12 22.5ZM16.4141 10.6641L11.4141 15.6641C11.0234 16.0547 10.4375 16.0547 10.0859 15.6641L7.58594 13.1641C7.19531 12.8125 7.19531 12.2266 7.58594 11.875C7.9375 11.4844 8.52344 11.4844 8.91406 11.875L10.75 13.7109L15.0859 9.375C15.4375 8.98438 16.0234 8.98438 16.4141 9.375C16.7656 9.72656 16.7656 10.3125 16.4141 10.6641Z", fill: "currentColor" }) });
 var FeatureBullets = ({
   title,
   bullets,
@@ -1353,26 +1349,26 @@ var FeatureBullets = ({
   imageAlt = "",
   imagePosition = "right"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("section", { className: FeatureBullets_default.section, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: FeatureBullets_default.container, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("section", { className: "feature-bullets", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "feature-bullets__container", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       className: [
-        FeatureBullets_default.split,
-        imagePosition === "left" ? FeatureBullets_default["split--image-left"] : ""
+        "feature-bullets__split",
+        imagePosition === "left" ? "feature-bullets__split--image-left" : ""
       ].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: FeatureBullets_default.content, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: FeatureBullets_default.title, children: title }),
-          bullets && bullets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: FeatureBullets_default.bulletList, children: bullets.map((bullet, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: FeatureBullets_default.bulletItem, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: FeatureBullets_default.iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CheckIcon2, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: FeatureBullets_default.bulletText, children: bullet })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "feature-bullets__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "feature-bullets__title", children: title }),
+          bullets && bullets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "feature-bullets__bullet-list", children: bullets.map((bullet, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "feature-bullets__bullet-item", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "feature-bullets__icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CheckIcon2, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "feature-bullets__bullet-text", children: bullet })
           ] }, i)) })
         ] }),
-        image && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: FeatureBullets_default.imageWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        image && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "feature-bullets__image-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "img",
           {
             alt: imageAlt,
-            className: FeatureBullets_default.image,
+            className: "feature-bullets__image",
             src: image
           }
         ) })
@@ -1382,7 +1378,7 @@ var FeatureBullets = ({
 };
 
 // components/Footer/Footer.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var ExternalLinkIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   "svg",
@@ -1497,7 +1493,7 @@ var Footer = ({
   ...props
 }) => {
   const allSections = navColumns.flat();
-  const [openSections, setOpenSections] = (0, import_react7.useState)(/* @__PURE__ */ new Set());
+  const [openSections, setOpenSections] = (0, import_react8.useState)(/* @__PURE__ */ new Set());
   const toggleSection = (index) => {
     setOpenSections((prev) => {
       const next = new Set(prev);
@@ -1862,7 +1858,7 @@ var Hero = ({
 };
 
 // templates/Header/Header.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var ButtonBlock2 = ({
   primaryButton,
@@ -1919,10 +1915,10 @@ var Header = ({
   ...props
 }) => {
   const variantClass = `header--${variant}`;
-  const sectionRef = (0, import_react8.useRef)(null);
-  const leftRef = (0, import_react8.useRef)(null);
-  const rightRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const sectionRef = (0, import_react9.useRef)(null);
+  const leftRef = (0, import_react9.useRef)(null);
+  const rightRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
     if (variant !== "visuals") return;
     if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
     const section = sectionRef.current;
@@ -1984,7 +1980,7 @@ var Header = ({
 };
 
 // templates/Stats/Stats.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var INTERVAL_MS = 2e3;
 var TRANSITION = "transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1)";
@@ -2022,16 +2018,16 @@ var Stats = ({
   className,
   ...props
 }) => {
-  const [activeIndex, setActiveIndex] = (0, import_react9.useState)(0);
-  const intervalRef = (0, import_react9.useRef)(null);
-  const sectionRef = (0, import_react9.useRef)(null);
-  const leftColRef = (0, import_react9.useRef)(null);
-  const rightColRef = (0, import_react9.useRef)(null);
-  const rafRef = (0, import_react9.useRef)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react10.useState)(0);
+  const intervalRef = (0, import_react10.useRef)(null);
+  const sectionRef = (0, import_react10.useRef)(null);
+  const leftColRef = (0, import_react10.useRef)(null);
+  const rightColRef = (0, import_react10.useRef)(null);
+  const rafRef = (0, import_react10.useRef)(null);
   const hasAwards = leftAwards.length > 0 || rightAwards.length > 0;
   const allAwards = [...leftAwards, ...rightAwards];
   const total = stats.length;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (total <= 1) return;
     intervalRef.current = setInterval(() => {
       setActiveIndex((prev) => (prev + 1) % total);
@@ -2040,7 +2036,7 @@ var Stats = ({
       if (intervalRef.current) clearInterval(intervalRef.current);
     };
   }, [total]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const applyParallax = () => {
       const section = sectionRef.current;
       if (!section || window.innerWidth < PARALLAX_BP) {
@@ -2115,10 +2111,10 @@ var Stats = ({
 };
 
 // templates/FeatureScroll/FeatureScroll.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // components/DotLottieInView/DotLottieInView.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_dotlottie_react = require("@lottiefiles/dotlottie-react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function DotLottieInView({
@@ -2129,10 +2125,10 @@ function DotLottieInView({
   style,
   ...dotProps
 }) {
-  const wrapRef = (0, import_react10.useRef)(null);
-  const [inView, setInView] = (0, import_react10.useState)(false);
-  const [dotLottie, setDotLottie] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
+  const wrapRef = (0, import_react11.useRef)(null);
+  const [inView, setInView] = (0, import_react11.useState)(false);
+  const [dotLottie, setDotLottie] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
     const el = wrapRef.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -2144,7 +2140,7 @@ function DotLottieInView({
     observer.observe(el);
     return () => observer.disconnect();
   }, [rootMargin, threshold]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!dotLottie) return;
     if (!enabled || !inView) {
       dotLottie.stop();
@@ -2278,10 +2274,10 @@ var FeatureScroll = ({
   className,
   ...props
 }) => {
-  const [activeIndex, setActiveIndex] = (0, import_react11.useState)(0);
-  const titleRefs = (0, import_react11.useRef)([]);
-  const mediaColRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useLayoutEffect)(() => {
+  const [activeIndex, setActiveIndex] = (0, import_react12.useState)(0);
+  const titleRefs = (0, import_react12.useRef)([]);
+  const mediaColRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useLayoutEffect)(() => {
     if (items.length === 0) return;
     const readThresholdPx = () => {
       const col = mediaColRef.current;
@@ -2414,7 +2410,7 @@ var FeatureScroll = ({
 };
 
 // templates/StickyStackedCards/StickyStackedCards.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var PLACEHOLDER_IMAGE = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
 var STEPS_DATA = [
@@ -2444,8 +2440,8 @@ var StickyStackedCards = ({
   className,
   ...props
 }) => {
-  const cardRefs = (0, import_react12.useRef)([]);
-  (0, import_react12.useEffect)(() => {
+  const cardRefs = (0, import_react13.useRef)([]);
+  (0, import_react13.useEffect)(() => {
     if (typeof window === "undefined") return;
     let rafId = 0;
     const update = () => {
@@ -2534,7 +2530,7 @@ var StickyStackedCards = ({
 };
 
 // templates/CTABanner/CTABanner.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_framer_motion = require("framer-motion");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var ENTRANCE = {
@@ -2782,7 +2778,7 @@ var CTABanner = ({
   ...props
 }) => {
   const resolvedAvatars = avatars ?? (variant === "compact" ? COMPACT_AVATAR_DATA : AVATAR_DATA);
-  const sectionRef = (0, import_react13.useRef)(null);
+  const sectionRef = (0, import_react14.useRef)(null);
   const { scrollYProgress } = (0, import_framer_motion.useScroll)({
     target: sectionRef,
     offset: ["start end", "end start"]
@@ -2869,7 +2865,7 @@ var CTABanner = ({
 };
 
 // components/Navbar/Navbar.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_framer_motion2 = require("framer-motion");
 
 // assets/icon-globe.svg
@@ -3107,24 +3103,24 @@ var Navbar = ({
   className,
   ...props
 }) => {
-  const [openDropdown, setOpenDropdown] = (0, import_react14.useState)(null);
-  const [mobileOpen, setMobileOpen] = (0, import_react14.useState)(false);
-  const [mobileExpanded, setMobileExpanded] = (0, import_react14.useState)(null);
-  const [scrolled, setScrolled] = (0, import_react14.useState)(false);
-  const [langDropdownOpen, setLangDropdownOpen] = (0, import_react14.useState)(false);
-  const [mobileLangOpen, setMobileLangOpen] = (0, import_react14.useState)(false);
-  const hoverTimeoutRef = (0, import_react14.useRef)(null);
-  const langHoverTimeoutRef = (0, import_react14.useRef)(null);
-  const pillAreaRef = (0, import_react14.useRef)(null);
-  const langBtnRef = (0, import_react14.useRef)(null);
+  const [openDropdown, setOpenDropdown] = (0, import_react15.useState)(null);
+  const [mobileOpen, setMobileOpen] = (0, import_react15.useState)(false);
+  const [mobileExpanded, setMobileExpanded] = (0, import_react15.useState)(null);
+  const [scrolled, setScrolled] = (0, import_react15.useState)(false);
+  const [langDropdownOpen, setLangDropdownOpen] = (0, import_react15.useState)(false);
+  const [mobileLangOpen, setMobileLangOpen] = (0, import_react15.useState)(false);
+  const hoverTimeoutRef = (0, import_react15.useRef)(null);
+  const langHoverTimeoutRef = (0, import_react15.useRef)(null);
+  const pillAreaRef = (0, import_react15.useRef)(null);
+  const langBtnRef = (0, import_react15.useRef)(null);
   const hasLangDropdown = Boolean(languageItems && languageItems.length > 0);
   const resolvedLogo = theme === "light" ? logoSrcDark ?? logoSrc : logoSrc;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const onScroll = () => setScrolled(window.scrollY > 0);
     window.addEventListener("scroll", onScroll, { passive: true });
     return () => window.removeEventListener("scroll", onScroll);
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const onKey = (e) => {
       if (e.key === "Escape") {
         setOpenDropdown(null);
@@ -3135,16 +3131,16 @@ var Navbar = ({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!mobileOpen) setMobileLangOpen(false);
   }, [mobileOpen]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     document.body.style.overflow = mobileOpen ? "hidden" : "";
     return () => {
       document.body.style.overflow = "";
     };
   }, [mobileOpen]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!openDropdown) return;
     const onPointerDown = (e) => {
       if (pillAreaRef.current && !pillAreaRef.current.contains(e.target)) {
@@ -3154,36 +3150,36 @@ var Navbar = ({
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, [openDropdown]);
-  const clearHoverTimeout = (0, import_react14.useCallback)(() => {
+  const clearHoverTimeout = (0, import_react15.useCallback)(() => {
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
       hoverTimeoutRef.current = null;
     }
   }, []);
-  const clearLangHoverTimeout = (0, import_react14.useCallback)(() => {
+  const clearLangHoverTimeout = (0, import_react15.useCallback)(() => {
     if (langHoverTimeoutRef.current) {
       clearTimeout(langHoverTimeoutRef.current);
       langHoverTimeoutRef.current = null;
     }
   }, []);
-  const handleLangEnter = (0, import_react14.useCallback)(() => {
+  const handleLangEnter = (0, import_react15.useCallback)(() => {
     clearLangHoverTimeout();
     setLangDropdownOpen(true);
   }, [clearLangHoverTimeout]);
-  const handleLangLeave = (0, import_react14.useCallback)(() => {
+  const handleLangLeave = (0, import_react15.useCallback)(() => {
     clearLangHoverTimeout();
     langHoverTimeoutRef.current = setTimeout(() => setLangDropdownOpen(false), 150);
   }, [clearLangHoverTimeout]);
-  const handleLangSelect = (0, import_react14.useCallback)((code) => {
+  const handleLangSelect = (0, import_react15.useCallback)((code) => {
     setLangDropdownOpen(false);
     setMobileLangOpen(false);
     onLanguageSelect?.(code);
   }, [onLanguageSelect]);
-  const handleNavEnter = (0, import_react14.useCallback)((label) => {
+  const handleNavEnter = (0, import_react15.useCallback)((label) => {
     clearHoverTimeout();
     setOpenDropdown(label);
   }, [clearHoverTimeout]);
-  const handleNavLeave = (0, import_react14.useCallback)(() => {
+  const handleNavLeave = (0, import_react15.useCallback)(() => {
     clearHoverTimeout();
     hoverTimeoutRef.current = setTimeout(() => setOpenDropdown(null), 120);
   }, [clearHoverTimeout]);
@@ -3463,7 +3459,7 @@ var Navbar = ({
 };
 
 // templates/DayNightTransition/DayNightTransition.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_framer_motion3 = require("framer-motion");
 
 // templates/DayNightTransition/webflowDayNightV2Ix.ts
@@ -3572,13 +3568,13 @@ var DayNightTransition = ({
   className,
   ...props
 }) => {
-  const wrapperRef = (0, import_react15.useRef)(null);
-  const dayWordRef = (0, import_react15.useRef)(null);
-  const [nightMarginStart, setNightMarginStart] = (0, import_react15.useState)("0px");
-  const [nightMarginEnd, setNightMarginEnd] = (0, import_react15.useState)("0px");
-  const [ixMedia, setIxMedia] = (0, import_react15.useState)("desktop");
+  const wrapperRef = (0, import_react16.useRef)(null);
+  const dayWordRef = (0, import_react16.useRef)(null);
+  const [nightMarginStart, setNightMarginStart] = (0, import_react16.useState)("0px");
+  const [nightMarginEnd, setNightMarginEnd] = (0, import_react16.useState)("0px");
+  const [ixMedia, setIxMedia] = (0, import_react16.useState)("desktop");
   const webflowV2 = scrollPreset === "webflow-day-night-v2";
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const mq = window.matchMedia("(max-width: 991px)");
     const sync = () => setIxMedia(mq.matches ? "mobile" : "desktop");
     sync();
@@ -3586,7 +3582,7 @@ var DayNightTransition = ({
     return () => mq.removeEventListener("change", sync);
   }, []);
   const MotionHeadline = headlineLevel === "h1" ? import_framer_motion3.motion.h1 : import_framer_motion3.motion.h2;
-  (0, import_react15.useLayoutEffect)(() => {
+  (0, import_react16.useLayoutEffect)(() => {
     if (!inlineDayNightHeadline) return;
     const syncNightPull = () => {
       const dayEl = dayWordRef.current;
@@ -3907,7 +3903,7 @@ var dayNightTransitionV2Preset = {
 };
 
 // templates/LogoMarquee/LogoMarquee.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_framer_motion4 = require("framer-motion");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function modWrap(min, max, v) {
@@ -3966,8 +3962,8 @@ var LogoMarquee = ({
   const scrollVelocity = (0, import_framer_motion4.useVelocity)(scrollY);
   const col1Y = (0, import_framer_motion4.useMotionValue)(0);
   const col2Y = (0, import_framer_motion4.useMotionValue)(0);
-  const col1Ref = (0, import_react16.useRef)(null);
-  const col2Ref = (0, import_react16.useRef)(null);
+  const col1Ref = (0, import_react17.useRef)(null);
+  const col2Ref = (0, import_react17.useRef)(null);
   (0, import_framer_motion4.useAnimationFrame)((_, delta) => {
     const raw = scrollVelocity.get();
     if (Math.abs(raw) < DEADZONE) return;
@@ -4221,16 +4217,16 @@ var DownloadBanner = ({
 };
 
 // templates/TextScroll/TextScroll.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_gsap = require("gsap");
 var import_ScrollTrigger = require("gsap/ScrollTrigger");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 import_gsap.gsap.registerPlugin(import_ScrollTrigger.ScrollTrigger);
 var TextScroll = ({ text, className }) => {
-  const sectionRef = (0, import_react17.useRef)(null);
-  const wordsRef = (0, import_react17.useRef)([]);
+  const sectionRef = (0, import_react18.useRef)(null);
+  const wordsRef = (0, import_react18.useRef)([]);
   const words = text.split(/\s+/).filter(Boolean);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const section = sectionRef.current;
     const wordEls = wordsRef.current.filter(Boolean);
     if (!section || wordEls.length === 0) return;
@@ -4289,7 +4285,7 @@ var TextScroll = ({ text, className }) => {
 };
 
 // templates/StickyMarketCards/StickyMarketCards.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var PLACEHOLDER_IMAGE3 = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
 var StickyMarketCards = ({
@@ -4299,9 +4295,9 @@ var StickyMarketCards = ({
   className,
   ...props
 }) => {
-  const cardRefs = (0, import_react18.useRef)([]);
-  const cardInnerRefs = (0, import_react18.useRef)([]);
-  (0, import_react18.useEffect)(() => {
+  const cardRefs = (0, import_react19.useRef)([]);
+  const cardInnerRefs = (0, import_react19.useRef)([]);
+  (0, import_react19.useEffect)(() => {
     if (typeof window === "undefined") return;
     let rafId = 0;
     const update = () => {
@@ -4342,7 +4338,7 @@ var StickyMarketCards = ({
       cancelAnimationFrame(rafId);
     };
   }, [items.length]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (typeof window === "undefined") return;
     const syncHeights = () => {
       const inners = cardInnerRefs.current.filter(Boolean);
@@ -4443,7 +4439,7 @@ var StickyMarketCards = ({
 };
 
 // templates/Table/Table.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var InfoIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className, children: [
   /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -4461,11 +4457,11 @@ var Table = ({
   className,
   ...props
 }) => {
-  const [search, setSearch] = (0, import_react19.useState)("");
-  const [page, setPage] = (0, import_react19.useState)(1);
-  const [tooltip, setTooltip] = (0, import_react19.useState)({ visible: false, heading: "", description: "", x: 0, y: 0, arrowOffset: 0 });
+  const [search, setSearch] = (0, import_react20.useState)("");
+  const [page, setPage] = (0, import_react20.useState)(1);
+  const [tooltip, setTooltip] = (0, import_react20.useState)({ visible: false, heading: "", description: "", x: 0, y: 0, arrowOffset: 0 });
   const mainKey = mainColumnKey ?? columns.find((c) => c.width === "main")?.key ?? columns[0]?.key;
-  const filtered = (0, import_react19.useMemo)(() => {
+  const filtered = (0, import_react20.useMemo)(() => {
     const q = search.trim().toLowerCase();
     if (!q) return rows;
     return rows.filter(
@@ -4633,29 +4629,24 @@ var Table = ({
 };
 
 // templates/Leaders/Leaders.tsx
-var import_react20 = require("react");
-
-// templates/Leaders/Leaders.module.css
-var Leaders_default = {};
-
-// templates/Leaders/Leaders.tsx
+var import_react21 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var LinkedInIcon = () => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M14.816 0H1.18C0.528 0 0 0.516 0 1.153V14.846C0 15.484 0.528 16 1.18 16H14.816C15.468 16 16 15.484 16 14.846V1.153C16 0.516 15.468 0 14.816 0ZM4.744 13.642H2.368V5.996H4.744V13.642ZM3.556 4.952C2.796 4.952 2.18 4.336 2.18 3.576C2.18 2.816 2.796 2.2 3.556 2.2C4.316 2.2 4.932 2.816 4.932 3.576C4.932 4.336 4.316 4.952 3.556 4.952ZM13.642 13.642H11.266V9.924C11.266 9.038 11.25 7.896 10.032 7.896C8.814 7.896 8.626 8.846 8.626 9.86V13.642H6.25V5.996H8.53V7.04H8.562C8.88 6.44 9.534 5.806 10.686 5.806C12.958 5.806 13.642 7.3 13.642 9.386V13.642Z", fill: "currentColor" }) });
 var ChevronDownIcon4 = () => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var ChevronUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M12 10L8 6L4 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var CardContent = ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: Leaders_default.imageWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "leaders__image-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "img",
     {
       src: item.imageUrl,
       alt: item.name,
-      className: Leaders_default.image,
+      className: "leaders__image",
       loading: "lazy"
     }
   ) }),
-  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: Leaders_default.content, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: Leaders_default.name, children: item.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: Leaders_default.role, children: item.role })
+  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "leaders__content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "leaders__name", children: item.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "leaders__role", children: item.role })
   ] }),
   item.linkedinUrl && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Link,
@@ -4667,7 +4658,7 @@ var CardContent = ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(i
       label: "LinkedIn",
       colorScheme: "black",
       showChevron: false,
-      className: Leaders_default.link
+      className: "leaders__link"
     }
   )
 ] });
@@ -4680,29 +4671,29 @@ var Leaders = ({
   className,
   ...props
 }) => {
-  const [isExpanded, setIsExpanded] = (0, import_react20.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react21.useState)(false);
   const hasMore = items.length > initialVisibleCount;
   const visibleItems = items.slice(0, initialVisibleCount);
   const extraItems = items.slice(initialVisibleCount);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("section", { className: [Leaders_default.section, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: Leaders_default.container, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: Leaders_default.header, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: Leaders_default.title, children: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: Leaders_default.gridWrapper, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: Leaders_default.grid, children: visibleItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: Leaders_default.card, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CardContent, { item }) }, i)) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("section", { className: ["leaders", className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "leaders__container", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "leaders__header", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: "leaders__title", children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "leaders__grid-wrapper", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "leaders__grid", children: visibleItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "leaders__card", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CardContent, { item }) }, i)) }),
       hasMore && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "div",
         {
           className: [
-            Leaders_default.extraCards,
-            isExpanded ? Leaders_default.extraCardsOpen : ""
+            "leaders__extra-cards",
+            isExpanded ? "leaders__extra-cards--open" : ""
           ].join(" "),
           "aria-hidden": !isExpanded,
-          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: Leaders_default.extraGrid, children: extraItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "leaders__extra-grid", children: extraItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "div",
             {
               className: [
-                Leaders_default.card,
-                Leaders_default.extraCard,
-                isExpanded ? Leaders_default.extraCardVisible : ""
+                "leaders__card",
+                "leaders__extra-card",
+                isExpanded ? "leaders__extra-card--visible" : ""
               ].join(" "),
               style: {
                 transitionDelay: isExpanded ? `${i * 70 + 120}ms` : "0ms"
@@ -4714,7 +4705,7 @@ var Leaders = ({
         }
       )
     ] }),
-    hasMore && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: Leaders_default.actions, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    hasMore && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "leaders__actions", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       Button,
       {
         variant: "secondary",