@deriv-web-design/ui 0.0.22 → 0.0.25

package/dist/index.mjs

@@ -150,11 +150,6 @@ var Tag = ({
 
 // primitives/Accordion/Accordion.tsx
 import { useState } from "react";
-
-// primitives/Accordion/Accordion.module.css
-var Accordion_default = {};
-
-// primitives/Accordion/Accordion.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var ChevronIcon2 = () => /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var Accordion = ({
@@ -176,7 +171,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__ */ jsxs5(
     "div",
     {
@@ -189,17 +184,17 @@ var Accordion = ({
         /* @__PURE__ */ jsxs5(
           "button",
           {
-            className: Accordion_default.header,
+            className: "accordion__header",
             onClick: handleToggle,
             "aria-expanded": isOpen,
             children: [
-              /* @__PURE__ */ jsx5("span", { className: Accordion_default.titleWrapper, children: /* @__PURE__ */ jsx5("span", { className: Accordion_default.title, children: title }) }),
-              /* @__PURE__ */ jsx5("span", { className: [Accordion_default.chevron, isOpen ? Accordion_default.chevronRotated : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx5(ChevronIcon2, {}) }),
-              showFocusRing && /* @__PURE__ */ jsx5("span", { className: Accordion_default.focusRing, "aria-hidden": "true" })
+              /* @__PURE__ */ jsx5("span", { className: "accordion__title-wrapper", children: /* @__PURE__ */ jsx5("span", { className: "accordion__title", children: title }) }),
+              /* @__PURE__ */ jsx5("span", { className: ["accordion__chevron", isOpen ? "accordion__chevron--rotated" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx5(ChevronIcon2, {}) }),
+              showFocusRing && /* @__PURE__ */ jsx5("span", { className: "accordion__focus-ring", "aria-hidden": "true" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx5("div", { className: [Accordion_default.bodyWrapper, isOpen ? Accordion_default.bodyWrapperOpen : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx5("div", { className: Accordion_default.bodyInner, children: /* @__PURE__ */ jsx5("div", { className: Accordion_default.body, children }) }) })
+        /* @__PURE__ */ jsx5("div", { className: ["accordion__body-wrapper", isOpen ? "accordion__body-wrapper--open" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx5("div", { className: "accordion__body-inner", children: /* @__PURE__ */ jsx5("div", { className: "accordion__body", children }) }) })
       ]
     }
   );
@@ -1031,22 +1026,26 @@ var Tabs = ({
   );
 };
 
-// templates/FaqAccordion/FaqAccordion.module.css
-var FaqAccordion_default = {};
-
 // templates/FaqAccordion/FaqAccordion.tsx
+import { useState as useState5 } from "react";
 import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var FaqAccordion = ({
   title,
   items,
   colorScheme = "white"
 }) => {
-  return /* @__PURE__ */ jsx17("section", { className: [FaqAccordion_default.section, FaqAccordion_default[`section--${colorScheme}`]].join(" "), children: /* @__PURE__ */ jsxs15("div", { className: FaqAccordion_default.container, children: [
-    /* @__PURE__ */ jsx17("div", { className: FaqAccordion_default.header, children: /* @__PURE__ */ jsx17("h2", { className: FaqAccordion_default.title, children: title }) }),
-    /* @__PURE__ */ jsx17("div", { className: FaqAccordion_default.list, children: items.map((item, index) => /* @__PURE__ */ jsx17(
+  const [openIndex, setOpenIndex] = useState5(null);
+  const handleToggle = (index) => (isOpen) => {
+    setOpenIndex(isOpen ? index : null);
+  };
+  return /* @__PURE__ */ jsx17("section", { className: ["faq-accordion", `faq-accordion--${colorScheme}`].join(" "), children: /* @__PURE__ */ jsxs15("div", { className: "faq-accordion__container", children: [
+    /* @__PURE__ */ jsx17("div", { className: "faq-accordion__header", children: /* @__PURE__ */ jsx17("h2", { className: "faq-accordion__title", children: title }) }),
+    /* @__PURE__ */ jsx17("div", { className: "faq-accordion__list", children: items.map((item, index) => /* @__PURE__ */ jsx17(
       Accordion,
       {
         title: item.question,
+        open: openIndex === index,
+        onToggle: handleToggle(index),
         showTopDivider: index === 0,
         showBottomDivider: true,
         children: item.answer
@@ -1273,12 +1272,9 @@ var FeatureCardsIcon = ({
   ] }) });
 };
 
-// templates/FeatureBullets/FeatureBullets.module.css
-var FeatureBullets_default = {};
-
 // templates/FeatureBullets/FeatureBullets.tsx
 import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
-var CheckIcon2 = () => /* @__PURE__ */ jsx20("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__ */ jsx20("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__ */ jsx20("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__ */ jsx20("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,
@@ -1286,26 +1282,26 @@ var FeatureBullets = ({
   imageAlt = "",
   imagePosition = "right"
 }) => {
-  return /* @__PURE__ */ jsx20("section", { className: FeatureBullets_default.section, children: /* @__PURE__ */ jsx20("div", { className: FeatureBullets_default.container, children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx20("section", { className: "feature-bullets", children: /* @__PURE__ */ jsx20("div", { className: "feature-bullets__container", children: /* @__PURE__ */ jsxs18(
     "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__ */ jsxs18("div", { className: FeatureBullets_default.content, children: [
-          /* @__PURE__ */ jsx20("h2", { className: FeatureBullets_default.title, children: title }),
-          bullets && bullets.length > 0 && /* @__PURE__ */ jsx20("div", { className: FeatureBullets_default.bulletList, children: bullets.map((bullet, i) => /* @__PURE__ */ jsxs18("div", { className: FeatureBullets_default.bulletItem, children: [
-            /* @__PURE__ */ jsx20("div", { className: FeatureBullets_default.iconWrapper, children: /* @__PURE__ */ jsx20(CheckIcon2, {}) }),
-            /* @__PURE__ */ jsx20("p", { className: FeatureBullets_default.bulletText, children: bullet })
+        /* @__PURE__ */ jsxs18("div", { className: "feature-bullets__content", children: [
+          /* @__PURE__ */ jsx20("h2", { className: "feature-bullets__title", children: title }),
+          bullets && bullets.length > 0 && /* @__PURE__ */ jsx20("div", { className: "feature-bullets__bullet-list", children: bullets.map((bullet, i) => /* @__PURE__ */ jsxs18("div", { className: "feature-bullets__bullet-item", children: [
+            /* @__PURE__ */ jsx20("div", { className: "feature-bullets__icon-wrapper", children: /* @__PURE__ */ jsx20(CheckIcon2, {}) }),
+            /* @__PURE__ */ jsx20("p", { className: "feature-bullets__bullet-text", children: bullet })
           ] }, i)) })
         ] }),
-        image && /* @__PURE__ */ jsx20("div", { className: FeatureBullets_default.imageWrapper, children: /* @__PURE__ */ jsx20(
+        image && /* @__PURE__ */ jsx20("div", { className: "feature-bullets__image-wrapper", children: /* @__PURE__ */ jsx20(
           "img",
           {
             alt: imageAlt,
-            className: FeatureBullets_default.image,
+            className: "feature-bullets__image",
             src: image
           }
         ) })
@@ -1315,7 +1311,7 @@ var FeatureBullets = ({
 };
 
 // components/Footer/Footer.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 var ExternalLinkIcon = () => /* @__PURE__ */ jsx21(
   "svg",
@@ -1430,7 +1426,7 @@ var Footer = ({
   ...props
 }) => {
   const allSections = navColumns.flat();
-  const [openSections, setOpenSections] = useState5(/* @__PURE__ */ new Set());
+  const [openSections, setOpenSections] = useState6(/* @__PURE__ */ new Set());
   const toggleSection = (index) => {
     setOpenSections((prev) => {
       const next = new Set(prev);
@@ -1917,7 +1913,7 @@ var Header = ({
 };
 
 // templates/Stats/Stats.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState6 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState7 } from "react";
 import { jsx as jsx24, jsxs as jsxs22 } from "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)";
@@ -1955,7 +1951,7 @@ var Stats = ({
   className,
   ...props
 }) => {
-  const [activeIndex, setActiveIndex] = useState6(0);
+  const [activeIndex, setActiveIndex] = useState7(0);
   const intervalRef = useRef4(null);
   const sectionRef = useRef4(null);
   const leftColRef = useRef4(null);
@@ -2048,10 +2044,10 @@ var Stats = ({
 };
 
 // templates/FeatureScroll/FeatureScroll.tsx
-import { useLayoutEffect, useRef as useRef6, useState as useState8 } from "react";
+import { useLayoutEffect, useRef as useRef6, useState as useState9 } from "react";
 
 // components/DotLottieInView/DotLottieInView.tsx
-import { useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
+import { useEffect as useEffect5, useRef as useRef5, useState as useState8 } from "react";
 import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 function DotLottieInView({
@@ -2063,8 +2059,8 @@ function DotLottieInView({
   ...dotProps
 }) {
   const wrapRef = useRef5(null);
-  const [inView, setInView] = useState7(false);
-  const [dotLottie, setDotLottie] = useState7(null);
+  const [inView, setInView] = useState8(false);
+  const [dotLottie, setDotLottie] = useState8(null);
   useEffect5(() => {
     const el = wrapRef.current;
     if (!el) return;
@@ -2211,7 +2207,7 @@ var FeatureScroll = ({
   className,
   ...props
 }) => {
-  const [activeIndex, setActiveIndex] = useState8(0);
+  const [activeIndex, setActiveIndex] = useState9(0);
   const titleRefs = useRef6([]);
   const mediaColRef = useRef6(null);
   useLayoutEffect(() => {
@@ -2808,7 +2804,7 @@ var CTABanner = ({
 };
 
 // components/Navbar/Navbar.tsx
-import { useRef as useRef9, useState as useState9, useEffect as useEffect7, useCallback as useCallback2 } from "react";
+import { useRef as useRef9, useState as useState10, useEffect as useEffect7, useCallback as useCallback2 } from "react";
 import { motion as motion2, AnimatePresence } from "framer-motion";
 
 // assets/icon-globe.svg
@@ -3046,12 +3042,12 @@ var Navbar = ({
   className,
   ...props
 }) => {
-  const [openDropdown, setOpenDropdown] = useState9(null);
-  const [mobileOpen, setMobileOpen] = useState9(false);
-  const [mobileExpanded, setMobileExpanded] = useState9(null);
-  const [scrolled, setScrolled] = useState9(false);
-  const [langDropdownOpen, setLangDropdownOpen] = useState9(false);
-  const [mobileLangOpen, setMobileLangOpen] = useState9(false);
+  const [openDropdown, setOpenDropdown] = useState10(null);
+  const [mobileOpen, setMobileOpen] = useState10(false);
+  const [mobileExpanded, setMobileExpanded] = useState10(null);
+  const [scrolled, setScrolled] = useState10(false);
+  const [langDropdownOpen, setLangDropdownOpen] = useState10(false);
+  const [mobileLangOpen, setMobileLangOpen] = useState10(false);
   const hoverTimeoutRef = useRef9(null);
   const langHoverTimeoutRef = useRef9(null);
   const pillAreaRef = useRef9(null);
@@ -3402,7 +3398,7 @@ var Navbar = ({
 };
 
 // templates/DayNightTransition/DayNightTransition.tsx
-import { useEffect as useEffect8, useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as useState10 } from "react";
+import { useEffect as useEffect8, useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as useState11 } from "react";
 import {
   motion as motion3,
   useScroll as useScroll2,
@@ -3519,9 +3515,9 @@ var DayNightTransition = ({
 }) => {
   const wrapperRef = useRef10(null);
   const dayWordRef = useRef10(null);
-  const [nightMarginStart, setNightMarginStart] = useState10("0px");
-  const [nightMarginEnd, setNightMarginEnd] = useState10("0px");
-  const [ixMedia, setIxMedia] = useState10("desktop");
+  const [nightMarginStart, setNightMarginStart] = useState11("0px");
+  const [nightMarginEnd, setNightMarginEnd] = useState11("0px");
+  const [ixMedia, setIxMedia] = useState11("desktop");
   const webflowV2 = scrollPreset === "webflow-day-night-v2";
   useEffect8(() => {
     const mq = window.matchMedia("(max-width: 991px)");
@@ -4394,7 +4390,7 @@ var StickyMarketCards = ({
 };
 
 // templates/Table/Table.tsx
-import { useState as useState11, useMemo } from "react";
+import { useState as useState12, useMemo } from "react";
 import { Fragment as Fragment4, jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
 var InfoIcon = ({ className }) => /* @__PURE__ */ jsxs33("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className, children: [
   /* @__PURE__ */ jsx37("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -4412,9 +4408,9 @@ var Table = ({
   className,
   ...props
 }) => {
-  const [search, setSearch] = useState11("");
-  const [page, setPage] = useState11(1);
-  const [tooltip, setTooltip] = useState11({ visible: false, heading: "", description: "", x: 0, y: 0, arrowOffset: 0 });
+  const [search, setSearch] = useState12("");
+  const [page, setPage] = useState12(1);
+  const [tooltip, setTooltip] = useState12({ 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 = useMemo(() => {
     const q = search.trim().toLowerCase();
@@ -4584,29 +4580,24 @@ var Table = ({
 };
 
 // templates/Leaders/Leaders.tsx
-import { useState as useState12 } from "react";
-
-// templates/Leaders/Leaders.module.css
-var Leaders_default = {};
-
-// templates/Leaders/Leaders.tsx
+import { useState as useState13 } from "react";
 import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
 var LinkedInIcon = () => /* @__PURE__ */ jsx38("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx38("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__ */ jsx38("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx38("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var ChevronUpIcon = () => /* @__PURE__ */ jsx38("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx38("path", { d: "M12 10L8 6L4 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var CardContent = ({ item }) => /* @__PURE__ */ jsxs34(Fragment5, { children: [
-  /* @__PURE__ */ jsx38("div", { className: Leaders_default.imageWrapper, children: /* @__PURE__ */ jsx38(
+  /* @__PURE__ */ jsx38("div", { className: "leaders__image-wrapper", children: /* @__PURE__ */ jsx38(
     "img",
     {
       src: item.imageUrl,
       alt: item.name,
-      className: Leaders_default.image,
+      className: "leaders__image",
       loading: "lazy"
     }
   ) }),
-  /* @__PURE__ */ jsxs34("div", { className: Leaders_default.content, children: [
-    /* @__PURE__ */ jsx38("h3", { className: Leaders_default.name, children: item.name }),
-    /* @__PURE__ */ jsx38("p", { className: Leaders_default.role, children: item.role })
+  /* @__PURE__ */ jsxs34("div", { className: "leaders__content", children: [
+    /* @__PURE__ */ jsx38("h3", { className: "leaders__name", children: item.name }),
+    /* @__PURE__ */ jsx38("p", { className: "leaders__role", children: item.role })
   ] }),
   item.linkedinUrl && /* @__PURE__ */ jsx38(
     Link,
@@ -4618,7 +4609,7 @@ var CardContent = ({ item }) => /* @__PURE__ */ jsxs34(Fragment5, { children: [
       label: "LinkedIn",
       colorScheme: "black",
       showChevron: false,
-      className: Leaders_default.link
+      className: "leaders__link"
     }
   )
 ] });
@@ -4631,29 +4622,29 @@ var Leaders = ({
   className,
   ...props
 }) => {
-  const [isExpanded, setIsExpanded] = useState12(false);
+  const [isExpanded, setIsExpanded] = useState13(false);
   const hasMore = items.length > initialVisibleCount;
   const visibleItems = items.slice(0, initialVisibleCount);
   const extraItems = items.slice(initialVisibleCount);
-  return /* @__PURE__ */ jsx38("section", { className: [Leaders_default.section, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs34("div", { className: Leaders_default.container, children: [
-    title && /* @__PURE__ */ jsx38("div", { className: Leaders_default.header, children: /* @__PURE__ */ jsx38("h2", { className: Leaders_default.title, children: title }) }),
-    /* @__PURE__ */ jsxs34("div", { className: Leaders_default.gridWrapper, children: [
-      /* @__PURE__ */ jsx38("div", { className: Leaders_default.grid, children: visibleItems.map((item, i) => /* @__PURE__ */ jsx38("div", { className: Leaders_default.card, children: /* @__PURE__ */ jsx38(CardContent, { item }) }, i)) }),
+  return /* @__PURE__ */ jsx38("section", { className: ["leaders", className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs34("div", { className: "leaders__container", children: [
+    title && /* @__PURE__ */ jsx38("div", { className: "leaders__header", children: /* @__PURE__ */ jsx38("h2", { className: "leaders__title", children: title }) }),
+    /* @__PURE__ */ jsxs34("div", { className: "leaders__grid-wrapper", children: [
+      /* @__PURE__ */ jsx38("div", { className: "leaders__grid", children: visibleItems.map((item, i) => /* @__PURE__ */ jsx38("div", { className: "leaders__card", children: /* @__PURE__ */ jsx38(CardContent, { item }) }, i)) }),
       hasMore && /* @__PURE__ */ jsx38(
         "div",
         {
           className: [
-            Leaders_default.extraCards,
-            isExpanded ? Leaders_default.extraCardsOpen : ""
+            "leaders__extra-cards",
+            isExpanded ? "leaders__extra-cards--open" : ""
           ].join(" "),
           "aria-hidden": !isExpanded,
-          children: /* @__PURE__ */ jsx38("div", { className: Leaders_default.extraGrid, children: extraItems.map((item, i) => /* @__PURE__ */ jsx38(
+          children: /* @__PURE__ */ jsx38("div", { className: "leaders__extra-grid", children: extraItems.map((item, i) => /* @__PURE__ */ jsx38(
             "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"
@@ -4665,7 +4656,7 @@ var Leaders = ({
         }
       )
     ] }),
-    hasMore && /* @__PURE__ */ jsx38("div", { className: Leaders_default.actions, children: /* @__PURE__ */ jsx38(
+    hasMore && /* @__PURE__ */ jsx38("div", { className: "leaders__actions", children: /* @__PURE__ */ jsx38(
       Button,
       {
         variant: "secondary",