@deriv-web-design/ui 0.0.24 → 0.0.25

package/dist/index.mjs

@@ -1027,18 +1027,25 @@ var Tabs = ({
 };
 
 // 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"
 }) => {
+  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
@@ -1304,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",
@@ -1419,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);
@@ -1906,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)";
@@ -1944,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);
@@ -2037,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({
@@ -2052,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;
@@ -2200,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(() => {
@@ -2797,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
@@ -3035,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);
@@ -3391,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,
@@ -3508,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)");
@@ -4383,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" }),
@@ -4401,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();
@@ -4573,7 +4580,7 @@ var Table = ({
 };
 
 // templates/Leaders/Leaders.tsx
-import { useState as useState12 } from "react";
+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" }) });
@@ -4615,7 +4622,7 @@ 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);