@deriv-web-design/ui 0.0.24 → 0.0.25

package/dist/index.js

@@ -1094,18 +1094,25 @@ var Tabs = ({
 };
 
 // templates/FaqAccordion/FaqAccordion.tsx
+var import_react7 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var FaqAccordion = ({
   title,
   items,
   colorScheme = "white"
 }) => {
+  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
@@ -1371,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",
@@ -1486,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);
@@ -1851,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,
@@ -1908,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;
@@ -1973,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)";
@@ -2011,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);
@@ -2029,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) {
@@ -2104,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({
@@ -2118,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(
@@ -2133,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();
@@ -2267,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;
@@ -2403,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 = [
@@ -2433,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 = () => {
@@ -2523,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 = {
@@ -2771,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"]
@@ -2858,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
@@ -3096,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);
@@ -3124,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)) {
@@ -3143,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]);
@@ -3452,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
@@ -3561,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();
@@ -3575,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;
@@ -3896,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) {
@@ -3955,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;
@@ -4210,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;
@@ -4278,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 = ({
@@ -4288,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 = () => {
@@ -4331,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);
@@ -4432,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" }),
@@ -4450,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(
@@ -4622,7 +4629,7 @@ var Table = ({
 };
 
 // templates/Leaders/Leaders.tsx
-var import_react20 = require("react");
+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" }) });
@@ -4664,7 +4671,7 @@ 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);