@deriv-web-design/ui 0.0.6 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.css +150 -17
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +24 -4
  4. package/dist/index.d.ts +24 -4
  5. package/dist/index.js +198 -273
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +186 -261
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +4 -4
package/dist/index.js CHANGED
@@ -2304,104 +2304,32 @@ var CTABanner = ({
2304
2304
 
2305
2305
  // components/Navbar/Navbar.tsx
2306
2306
  var import_react12 = require("react");
2307
- var import_framer_motion2 = require("framer-motion");
2308
2307
 
2309
2308
  // assets/icon-globe.svg
2310
2309
  var icon_globe_default = "./icon-globe-S54WYYEK.svg";
2311
2310
 
2312
2311
  // components/Navbar/Navbar.tsx
2313
2312
  var import_jsx_runtime23 = require("react/jsx-runtime");
2314
- var EASE_OUT_EXPO = [0.16, 1, 0.3, 1];
2315
- var dropdownVariants = {
2316
- hidden: { opacity: 0, scale: 0.96, y: -8 },
2317
- visible: { opacity: 1, scale: 1, y: 0 }
2318
- };
2319
- var drawerVariants = {
2320
- hidden: { y: "-100%" },
2321
- visible: { y: 0 }
2322
- };
2323
- var accordionVariants = {
2324
- hidden: { height: 0, opacity: 0 },
2325
- visible: { height: "auto", opacity: 1 }
2326
- };
2327
- var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2328
- "svg",
2329
- {
2330
- className,
2331
- width: "14",
2332
- height: "14",
2333
- viewBox: "0 0 14 14",
2334
- fill: "none",
2335
- "aria-hidden": "true",
2336
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2337
- "path",
2338
- {
2339
- d: "M2.625 4.8125L7 9.1875L11.375 4.8125",
2340
- stroke: "currentColor",
2341
- strokeWidth: "1.5",
2342
- strokeLinecap: "round",
2343
- strokeLinejoin: "round"
2344
- }
2345
- )
2346
- }
2347
- );
2348
- var ArrowRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2349
- "path",
2350
- {
2351
- d: "M2.625 7H11.375M11.375 7L7.875 3.5M11.375 7L7.875 10.5",
2352
- stroke: "currentColor",
2353
- strokeWidth: "1.5",
2354
- strokeLinecap: "round",
2355
- strokeLinejoin: "round"
2356
- }
2357
- ) });
2358
- var ArrowUpRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2359
- "path",
2360
- {
2361
- d: "M4.5 11.5L11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5",
2362
- stroke: "currentColor",
2363
- strokeWidth: "1.5",
2364
- strokeLinecap: "round",
2365
- strokeLinejoin: "round"
2366
- }
2367
- ) });
2368
- var BarsIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2369
- "path",
2370
- {
2371
- d: "M2.5 5H17.5M2.5 10H17.5M2.5 15H17.5",
2372
- stroke: "currentColor",
2373
- strokeWidth: "1.75",
2374
- strokeLinecap: "round"
2375
- }
2376
- ) });
2377
- var XMarkIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2378
- "path",
2379
- {
2380
- d: "M15 5L5 15M5 5L15 15",
2381
- stroke: "currentColor",
2382
- strokeWidth: "1.75",
2383
- strokeLinecap: "round"
2384
- }
2385
- ) });
2313
+ var ChevronDownIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className, width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M2.625 4.8125L7 9.1875L11.375 4.8125", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
2314
+ var ArrowRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M2.625 7H11.375M11.375 7L7.875 3.5M11.375 7L7.875 10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
2315
+ var ArrowRightSmIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: "navbar__lang-option-arrow", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M2.5 6H9.5M9.5 6L6.5 3M9.5 6L6.5 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
2316
+ var ArrowUpRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M4.5 11.5L11.5 4.5M11.5 4.5H5.5M11.5 4.5V10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
2317
+ var BarsIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M2.5 5H17.5M2.5 10H17.5M2.5 15H17.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) });
2318
+ var XMarkIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M15 5L5 15M5 5L15 15", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) });
2386
2319
  var GlobeIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: icon_globe_default, alt: "", "aria-hidden": "true", width: "20", height: "20", className });
2387
- var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
2320
+ var DropdownPanel = ({ item, isOpen, onMouseEnter, onMouseLeave }) => {
2388
2321
  const { dropdown } = item;
2389
2322
  if (!dropdown) return null;
2390
2323
  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2391
- import_framer_motion2.motion.div,
2324
+ "div",
2392
2325
  {
2393
- className: "navbar__dropdown",
2394
- variants: dropdownVariants,
2395
- initial: "hidden",
2396
- animate: "visible",
2397
- exit: "hidden",
2398
- transition: { duration: 0.18, ease: EASE_OUT_EXPO },
2326
+ className: ["navbar__dropdown", isOpen ? "navbar__dropdown--open" : ""].filter(Boolean).join(" "),
2399
2327
  onMouseEnter,
2400
2328
  onMouseLeave,
2401
2329
  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__dropdown-inner", children: [
2402
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-left", children: dropdown.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-col", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__dropdown-col-list", children: [
2403
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "navbar__dropdown-col-title", children: col.title }),
2404
- col.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2330
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-left", children: dropdown.columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-col", children: col.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__dropdown-col-list", children: [
2331
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "navbar__dropdown-col-title", children: section.title }),
2332
+ section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2405
2333
  "a",
2406
2334
  {
2407
2335
  href: link.href,
@@ -2415,7 +2343,7 @@ var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
2415
2343
  },
2416
2344
  link.href
2417
2345
  ))
2418
- ] }) }, col.title)) }),
2346
+ ] }, section.title)) }, colIdx)) }),
2419
2347
  dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__dropdown-right", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FeatureCard, { feature: dropdown.feature }) })
2420
2348
  ] })
2421
2349
  }
@@ -2427,32 +2355,17 @@ var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0, import_jsx_runtim
2427
2355
  className: mobile ? "navbar__drawer-feature" : "navbar__dropdown-feature",
2428
2356
  style: feature.backgroundImageUrl ? { backgroundImage: `url(${feature.backgroundImageUrl})` } : void 0,
2429
2357
  children: [
2430
- feature.backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2431
- "img",
2432
- {
2433
- src: feature.backgroundImageUrl,
2434
- alt: "",
2435
- className: mobile ? "navbar__drawer-feature-img" : "navbar__dropdown-feature-img",
2436
- "aria-hidden": "true"
2437
- }
2438
- ),
2358
+ feature.backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: feature.backgroundImageUrl, alt: "", className: mobile ? "navbar__drawer-feature-img" : "navbar__dropdown-feature-img", "aria-hidden": "true" }),
2439
2359
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: mobile ? "navbar__drawer-feature-overlay" : "navbar__dropdown-feature-overlay", "aria-hidden": "true" }),
2440
2360
  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: mobile ? "navbar__drawer-feature-content" : "navbar__dropdown-feature-content", children: [
2441
2361
  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
2442
2362
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: mobile ? "navbar__drawer-feature-title" : "navbar__dropdown-feature-title", children: feature.title }),
2443
2363
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: mobile ? "navbar__drawer-feature-desc" : "navbar__dropdown-feature-desc", children: feature.description })
2444
2364
  ] }),
2445
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2446
- "a",
2447
- {
2448
- href: feature.ctaHref,
2449
- className: mobile ? "navbar__drawer-feature-cta" : "navbar__dropdown-feature-cta",
2450
- children: [
2451
- feature.ctaLabel,
2452
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowRightIcon, {})
2453
- ]
2454
- }
2455
- )
2365
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("a", { href: feature.ctaHref, className: mobile ? "navbar__drawer-feature-cta" : "navbar__dropdown-feature-cta", children: [
2366
+ feature.ctaLabel,
2367
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowRightIcon, {})
2368
+ ] })
2456
2369
  ] })
2457
2370
  ]
2458
2371
  }
@@ -2463,7 +2376,7 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
2463
2376
  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2464
2377
  "button",
2465
2378
  {
2466
- className: `navbar__drawer-trigger ${isOpen ? "navbar__drawer-trigger--open" : ""}`,
2379
+ className: ["navbar__drawer-trigger", isOpen ? "navbar__drawer-trigger--open" : ""].filter(Boolean).join(" "),
2467
2380
  onClick: onToggle,
2468
2381
  "aria-expanded": isOpen,
2469
2382
  children: [
@@ -2472,38 +2385,23 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
2472
2385
  ]
2473
2386
  }
2474
2387
  ),
2475
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion2.AnimatePresence, { initial: false, children: isOpen && dropdown && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2476
- import_framer_motion2.motion.div,
2477
- {
2478
- className: "navbar__drawer-panel",
2479
- variants: accordionVariants,
2480
- initial: "hidden",
2481
- animate: "visible",
2482
- exit: "hidden",
2483
- transition: { duration: 0.22, ease: EASE_OUT_EXPO },
2484
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-panel-inner", children: [
2485
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-panel-cols", children: [0, 1].map((colIdx) => {
2486
- const colItems = dropdown.columns.filter((_, i) => i % 2 === colIdx);
2487
- if (colItems.length === 0) return null;
2488
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-panel-col", children: colItems.map((col) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-col-section", children: [
2489
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "navbar__drawer-col-title", children: col.title }),
2490
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-col-links", children: col.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2491
- "a",
2492
- {
2493
- href: link.href,
2494
- className: "navbar__drawer-link",
2495
- target: link.external ? "_blank" : void 0,
2496
- rel: link.external ? "noopener noreferrer" : void 0,
2497
- children: link.label
2498
- },
2499
- link.href
2500
- )) })
2501
- ] }, col.title)) }, colIdx);
2502
- }) }),
2503
- dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FeatureCard, { feature: dropdown.feature, mobile: true })
2504
- ] })
2505
- }
2506
- ) })
2388
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: ["navbar__drawer-panel", isOpen ? "navbar__drawer-panel--open" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-panel-inner", children: [
2389
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-panel-cols", children: dropdown?.columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-panel-col", children: col.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-col-section", children: [
2390
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "navbar__drawer-col-title", children: section.title }),
2391
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-col-links", children: section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2392
+ "a",
2393
+ {
2394
+ href: link.href,
2395
+ className: "navbar__drawer-link",
2396
+ target: link.external ? "_blank" : void 0,
2397
+ rel: link.external ? "noopener noreferrer" : void 0,
2398
+ children: link.label
2399
+ },
2400
+ link.href
2401
+ )) })
2402
+ ] }, section.title)) }, colIdx)) }),
2403
+ dropdown?.feature && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FeatureCard, { feature: dropdown.feature, mobile: true })
2404
+ ] }) })
2507
2405
  ] });
2508
2406
  };
2509
2407
  var Navbar = ({
@@ -2516,6 +2414,7 @@ var Navbar = ({
2516
2414
  loginHref,
2517
2415
  ctaLabel = "Open account",
2518
2416
  ctaHref,
2417
+ languages,
2519
2418
  languageLabel,
2520
2419
  onLanguageClick,
2521
2420
  className,
@@ -2525,9 +2424,15 @@ var Navbar = ({
2525
2424
  const [mobileOpen, setMobileOpen] = (0, import_react12.useState)(false);
2526
2425
  const [mobileExpanded, setMobileExpanded] = (0, import_react12.useState)(null);
2527
2426
  const [scrolled, setScrolled] = (0, import_react12.useState)(false);
2427
+ const [langOpen, setLangOpen] = (0, import_react12.useState)(false);
2428
+ const [mobileLangOpen, setMobileLangOpen] = (0, import_react12.useState)(false);
2528
2429
  const hoverTimeoutRef = (0, import_react12.useRef)(null);
2430
+ const langTimeoutRef = (0, import_react12.useRef)(null);
2529
2431
  const pillAreaRef = (0, import_react12.useRef)(null);
2432
+ const langWrapperRef = (0, import_react12.useRef)(null);
2530
2433
  const resolvedLogo = theme === "light" ? logoSrcDark ?? logoSrc : logoSrc;
2434
+ const activeLanguage = languages?.find((l) => l.active);
2435
+ const displayLabel = activeLanguage?.code ?? languageLabel;
2531
2436
  (0, import_react12.useEffect)(() => {
2532
2437
  const onScroll = () => setScrolled(window.scrollY > 0);
2533
2438
  window.addEventListener("scroll", onScroll, { passive: true });
@@ -2538,6 +2443,7 @@ var Navbar = ({
2538
2443
  if (e.key === "Escape") {
2539
2444
  setOpenDropdown(null);
2540
2445
  setMobileOpen(false);
2446
+ setLangOpen(false);
2541
2447
  }
2542
2448
  };
2543
2449
  document.addEventListener("keydown", onKey);
@@ -2559,6 +2465,16 @@ var Navbar = ({
2559
2465
  document.addEventListener("pointerdown", onPointerDown);
2560
2466
  return () => document.removeEventListener("pointerdown", onPointerDown);
2561
2467
  }, [openDropdown]);
2468
+ (0, import_react12.useEffect)(() => {
2469
+ if (!langOpen) return;
2470
+ const onPointerDown = (e) => {
2471
+ if (langWrapperRef.current && !langWrapperRef.current.contains(e.target)) {
2472
+ setLangOpen(false);
2473
+ }
2474
+ };
2475
+ document.addEventListener("pointerdown", onPointerDown);
2476
+ return () => document.removeEventListener("pointerdown", onPointerDown);
2477
+ }, [langOpen]);
2562
2478
  const clearHoverTimeout = (0, import_react12.useCallback)(() => {
2563
2479
  if (hoverTimeoutRef.current) {
2564
2480
  clearTimeout(hoverTimeoutRef.current);
@@ -2573,7 +2489,11 @@ var Navbar = ({
2573
2489
  clearHoverTimeout();
2574
2490
  hoverTimeoutRef.current = setTimeout(() => setOpenDropdown(null), 120);
2575
2491
  }, [clearHoverTimeout]);
2576
- const activeDropdownItem = navItems.find((item) => item.label === openDropdown);
2492
+ const handleLangSelect = (0, import_react12.useCallback)((lang) => {
2493
+ lang.onClick();
2494
+ setLangOpen(false);
2495
+ setMobileLangOpen(false);
2496
+ }, []);
2577
2497
  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2578
2498
  "nav",
2579
2499
  {
@@ -2587,29 +2507,16 @@ var Navbar = ({
2587
2507
  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__nav-group", children: [
2588
2508
  navItems.map((item) => {
2589
2509
  if (item.external) {
2590
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2591
- "a",
2592
- {
2593
- href: item.href,
2594
- className: "navbar__nav-item",
2595
- target: "_blank",
2596
- rel: "noopener noreferrer",
2597
- children: [
2598
- item.label,
2599
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowUpRightIcon, {})
2600
- ]
2601
- },
2602
- item.label
2603
- );
2510
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("a", { href: item.href, className: "navbar__nav-item", target: "_blank", rel: "noopener noreferrer", children: [
2511
+ item.label,
2512
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowUpRightIcon, {})
2513
+ ] }, item.label);
2604
2514
  }
2605
2515
  if (item.dropdown) {
2606
2516
  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2607
2517
  "button",
2608
2518
  {
2609
- className: [
2610
- "navbar__nav-item",
2611
- openDropdown === item.label ? "navbar__nav-item--open" : ""
2612
- ].filter(Boolean).join(" "),
2519
+ className: ["navbar__nav-item", openDropdown === item.label ? "navbar__nav-item--open" : ""].filter(Boolean).join(" "),
2613
2520
  onMouseEnter: () => handleNavEnter(item.label),
2614
2521
  onMouseLeave: handleNavLeave,
2615
2522
  "aria-expanded": openDropdown === item.label,
@@ -2624,45 +2531,74 @@ var Navbar = ({
2624
2531
  }
2625
2532
  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: item.href, className: "navbar__nav-item", children: item.label }, item.label);
2626
2533
  }),
2627
- languageLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { className: "navbar__nav-item navbar__lang-btn", onClick: onLanguageClick, children: [
2628
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
2629
- languageLabel
2630
- ] })
2534
+ displayLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2535
+ "div",
2536
+ {
2537
+ className: "navbar__lang-wrapper",
2538
+ ref: langWrapperRef,
2539
+ onMouseEnter: () => {
2540
+ if (langTimeoutRef.current) clearTimeout(langTimeoutRef.current);
2541
+ if (languages && languages.length > 0) setLangOpen(true);
2542
+ },
2543
+ onMouseLeave: () => {
2544
+ langTimeoutRef.current = setTimeout(() => setLangOpen(false), 150);
2545
+ },
2546
+ children: [
2547
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2548
+ "button",
2549
+ {
2550
+ className: ["navbar__nav-item", "navbar__lang-btn", langOpen ? "navbar__nav-item--open" : ""].filter(Boolean).join(" "),
2551
+ onClick: () => {
2552
+ if (!languages || languages.length === 0) onLanguageClick?.();
2553
+ },
2554
+ "aria-expanded": languages ? langOpen : void 0,
2555
+ "aria-haspopup": languages ? "listbox" : void 0,
2556
+ children: [
2557
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
2558
+ displayLabel,
2559
+ languages && languages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronDownIcon3, { className: "navbar__nav-item__chevron" })
2560
+ ]
2561
+ }
2562
+ ),
2563
+ languages && languages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: ["navbar__lang-dropdown", langOpen ? "navbar__lang-dropdown--open" : ""].filter(Boolean).join(" "), role: "listbox", children: languages.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2564
+ "button",
2565
+ {
2566
+ className: ["navbar__lang-option", lang.active ? "navbar__lang-option--active" : ""].filter(Boolean).join(" "),
2567
+ onClick: () => handleLangSelect(lang),
2568
+ role: "option",
2569
+ "aria-selected": lang.active,
2570
+ children: [
2571
+ lang.label,
2572
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowRightSmIcon, {})
2573
+ ]
2574
+ },
2575
+ lang.code
2576
+ )) })
2577
+ ]
2578
+ }
2579
+ )
2631
2580
  ] }),
2632
2581
  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__pill-actions", children: [
2633
2582
  loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
2634
2583
  ctaHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
2635
2584
  ] })
2636
2585
  ] }) }),
2637
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion2.AnimatePresence, { children: openDropdown && activeDropdownItem?.dropdown && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2586
+ navItems.map((item) => item.dropdown ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2638
2587
  DropdownPanel,
2639
2588
  {
2640
- item: activeDropdownItem,
2589
+ item,
2590
+ isOpen: openDropdown === item.label,
2641
2591
  onMouseEnter: clearHoverTimeout,
2642
2592
  onMouseLeave: handleNavLeave
2643
2593
  },
2644
- openDropdown
2645
- ) }),
2594
+ item.label
2595
+ ) : null),
2646
2596
  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__actions", children: [
2647
- loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2648
- Button,
2649
- {
2650
- colorScheme: theme === "dark" ? "white" : "black",
2651
- variant: "secondary",
2652
- label: loginLabel
2653
- }
2654
- ) }),
2597
+ loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: theme === "dark" ? "white" : "black", variant: "secondary", label: loginLabel }) }),
2655
2598
  ctaHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
2656
2599
  ] }),
2657
2600
  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__mobile-actions", children: [
2658
- loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2659
- Button,
2660
- {
2661
- colorScheme: scrolled || theme === "light" ? "black" : "white",
2662
- variant: "secondary",
2663
- label: loginLabel
2664
- }
2665
- ) }),
2601
+ loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: scrolled || theme === "light" ? "black" : "white", variant: "secondary", label: loginLabel }) }),
2666
2602
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2667
2603
  "button",
2668
2604
  {
@@ -2674,77 +2610,66 @@ var Navbar = ({
2674
2610
  )
2675
2611
  ] })
2676
2612
  ] }),
2677
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-clip", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion2.AnimatePresence, { children: mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2678
- import_framer_motion2.motion.div,
2679
- {
2680
- className: "navbar__drawer",
2681
- variants: drawerVariants,
2682
- initial: "hidden",
2683
- animate: "visible",
2684
- exit: "hidden",
2685
- transition: { duration: 0.3, ease: EASE_OUT_EXPO },
2686
- "aria-modal": "true",
2687
- role: "dialog",
2688
- "aria-label": "Navigation menu",
2689
- children: [
2690
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("nav", { className: "navbar__drawer-nav", children: [
2691
- navItems.map((item) => {
2692
- if (item.dropdown) {
2693
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2694
- DrawerAccordion,
2695
- {
2696
- item,
2697
- isOpen: mobileExpanded === item.label,
2698
- onToggle: () => setMobileExpanded(
2699
- (prev) => prev === item.label ? null : item.label
2700
- )
2701
- },
2702
- item.label
2703
- );
2704
- }
2705
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2706
- "a",
2707
- {
2708
- href: item.href,
2709
- className: "navbar__drawer-single",
2710
- target: item.external ? "_blank" : void 0,
2711
- rel: item.external ? "noopener noreferrer" : void 0,
2712
- children: [
2713
- item.label,
2714
- item.external && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowUpRightIcon, {})
2715
- ]
2716
- },
2717
- item.label
2718
- );
2719
- }),
2720
- languageLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { className: "navbar__drawer-lang", onClick: onLanguageClick, children: [
2721
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
2722
- languageLabel
2723
- ] })
2724
- ] }),
2725
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-footer", children: [
2726
- loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2727
- Button,
2728
- {
2729
- colorScheme: "black",
2730
- variant: "secondary",
2731
- label: loginLabel,
2732
- fullWidth: true
2733
- }
2734
- ) }),
2735
- ctaHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2736
- Button,
2613
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-clip", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: ["navbar__drawer", mobileOpen ? "navbar__drawer--open" : ""].filter(Boolean).join(" "), "aria-modal": "true", role: "dialog", "aria-label": "Navigation menu", children: [
2614
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("nav", { className: "navbar__drawer-nav", children: [
2615
+ navItems.map((item) => {
2616
+ if (item.dropdown) {
2617
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2618
+ DrawerAccordion,
2737
2619
  {
2738
- colorScheme: "coral",
2739
- variant: "primary",
2740
- label: ctaLabel,
2741
- fullWidth: true
2742
- }
2743
- ) })
2744
- ] })
2745
- ]
2746
- }
2747
- ) }) })
2620
+ item,
2621
+ isOpen: mobileExpanded === item.label,
2622
+ onToggle: () => setMobileExpanded((prev) => prev === item.label ? null : item.label)
2623
+ },
2624
+ item.label
2625
+ );
2626
+ }
2627
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("a", { href: item.href, className: "navbar__drawer-single", target: item.external ? "_blank" : void 0, rel: item.external ? "noopener noreferrer" : void 0, children: [
2628
+ item.label,
2629
+ item.external && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowUpRightIcon, {})
2630
+ ] }, item.label);
2631
+ }),
2632
+ displayLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-item", children: [
2633
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2634
+ "button",
2635
+ {
2636
+ className: ["navbar__drawer-trigger", mobileLangOpen ? "navbar__drawer-trigger--open" : ""].filter(Boolean).join(" "),
2637
+ onClick: () => {
2638
+ if (languages && languages.length > 0) {
2639
+ setMobileLangOpen((o) => !o);
2640
+ } else {
2641
+ onLanguageClick?.();
2642
+ }
2643
+ },
2644
+ "aria-expanded": languages ? mobileLangOpen : void 0,
2645
+ children: [
2646
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "navbar__drawer-lang-label", children: [
2647
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobeIcon, { className: "navbar__lang-globe navbar__lang-globe--dark" }),
2648
+ displayLabel
2649
+ ] }),
2650
+ languages && languages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronDownIcon3, { className: "navbar__drawer-trigger__chevron" })
2651
+ ]
2652
+ }
2653
+ ),
2654
+ languages && languages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: ["navbar__drawer-lang-grid", mobileLangOpen ? "navbar__drawer-lang-grid--open" : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-lang-grid-inner", children: languages.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2655
+ "button",
2656
+ {
2657
+ className: ["navbar__drawer-lang-option", lang.active ? "navbar__drawer-lang-option--active" : ""].filter(Boolean).join(" "),
2658
+ onClick: () => handleLangSelect(lang),
2659
+ children: [
2660
+ lang.label,
2661
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowRightSmIcon, {})
2662
+ ]
2663
+ },
2664
+ lang.code
2665
+ )) }) })
2666
+ ] })
2667
+ ] }),
2668
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-footer", children: [
2669
+ loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "black", variant: "secondary", label: loginLabel, fullWidth: true }) }),
2670
+ ctaHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel, fullWidth: true }) })
2671
+ ] })
2672
+ ] }) })
2748
2673
  ]
2749
2674
  }
2750
2675
  );
@@ -2752,7 +2677,7 @@ var Navbar = ({
2752
2677
 
2753
2678
  // templates/DayNightTransition/DayNightTransition.tsx
2754
2679
  var import_react13 = require("react");
2755
- var import_framer_motion3 = require("framer-motion");
2680
+ var import_framer_motion2 = require("framer-motion");
2756
2681
  var import_jsx_runtime24 = require("react/jsx-runtime");
2757
2682
  var SPRING2 = { stiffness: 80, damping: 30, restDelta: 1e-3 };
2758
2683
  var FADE_START = 0.35;
@@ -2774,16 +2699,16 @@ var DayNightTransition = ({
2774
2699
  ...props
2775
2700
  }) => {
2776
2701
  const wrapperRef = (0, import_react13.useRef)(null);
2777
- const { scrollYProgress } = (0, import_framer_motion3.useScroll)({
2702
+ const { scrollYProgress } = (0, import_framer_motion2.useScroll)({
2778
2703
  target: wrapperRef,
2779
2704
  offset: ["start end", "end start"]
2780
2705
  });
2781
- const smooth = (0, import_framer_motion3.useSpring)(scrollYProgress, SPRING2);
2782
- const nightOpacity = (0, import_framer_motion3.useTransform)(smooth, [FADE_START, FADE_END], [0, 1]);
2783
- const channel = (0, import_framer_motion3.useTransform)(smooth, [FADE_START, FADE_END], [TEXT_CHANNEL_DAY, TEXT_CHANNEL_NIGHT]);
2784
- const textColor = import_framer_motion3.useMotionTemplate`rgb(${channel}, ${channel}, ${channel})`;
2785
- const dayOpacity = (0, import_framer_motion3.useTransform)(smooth, [WORD_START, WORD_END], [1, 0]);
2786
- const nightOpacity2 = (0, import_framer_motion3.useTransform)(smooth, [WORD_START, WORD_END], [0, 1]);
2706
+ const smooth = (0, import_framer_motion2.useSpring)(scrollYProgress, SPRING2);
2707
+ const nightOpacity = (0, import_framer_motion2.useTransform)(smooth, [FADE_START, FADE_END], [0, 1]);
2708
+ const channel = (0, import_framer_motion2.useTransform)(smooth, [FADE_START, FADE_END], [TEXT_CHANNEL_DAY, TEXT_CHANNEL_NIGHT]);
2709
+ const textColor = import_framer_motion2.useMotionTemplate`rgb(${channel}, ${channel}, ${channel})`;
2710
+ const dayOpacity = (0, import_framer_motion2.useTransform)(smooth, [WORD_START, WORD_END], [1, 0]);
2711
+ const nightOpacity2 = (0, import_framer_motion2.useTransform)(smooth, [WORD_START, WORD_END], [0, 1]);
2787
2712
  const hasDescription = Boolean(dayDescription || nightDescription);
2788
2713
  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2789
2714
  "div",
@@ -2803,7 +2728,7 @@ var DayNightTransition = ({
2803
2728
  }
2804
2729
  ),
2805
2730
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2806
- import_framer_motion3.motion.img,
2731
+ import_framer_motion2.motion.img,
2807
2732
  {
2808
2733
  className: "dnt__bg dnt__bg--night",
2809
2734
  src: nightImageUrl,
@@ -2814,14 +2739,14 @@ var DayNightTransition = ({
2814
2739
  }
2815
2740
  ),
2816
2741
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "dnt__content", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2817
- import_framer_motion3.motion.div,
2742
+ import_framer_motion2.motion.div,
2818
2743
  {
2819
2744
  className: "dnt__text-wrap",
2820
2745
  style: { color: textColor },
2821
2746
  children: [
2822
2747
  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
2823
2748
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2824
- import_framer_motion3.motion.h2,
2749
+ import_framer_motion2.motion.h2,
2825
2750
  {
2826
2751
  className: "dnt__headline",
2827
2752
  style: { opacity: dayOpacity },
@@ -2829,7 +2754,7 @@ var DayNightTransition = ({
2829
2754
  }
2830
2755
  ),
2831
2756
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2832
- import_framer_motion3.motion.h2,
2757
+ import_framer_motion2.motion.h2,
2833
2758
  {
2834
2759
  className: "dnt__headline",
2835
2760
  "aria-hidden": "true",
@@ -2840,7 +2765,7 @@ var DayNightTransition = ({
2840
2765
  ] }),
2841
2766
  hasDescription && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
2842
2767
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2843
- import_framer_motion3.motion.p,
2768
+ import_framer_motion2.motion.p,
2844
2769
  {
2845
2770
  className: "dnt__description",
2846
2771
  style: { opacity: dayOpacity },
@@ -2848,7 +2773,7 @@ var DayNightTransition = ({
2848
2773
  }
2849
2774
  ),
2850
2775
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2851
- import_framer_motion3.motion.p,
2776
+ import_framer_motion2.motion.p,
2852
2777
  {
2853
2778
  className: "dnt__description",
2854
2779
  "aria-hidden": "true",
@@ -2868,7 +2793,7 @@ var DayNightTransition = ({
2868
2793
 
2869
2794
  // templates/PaymentMethods/PaymentMethods.tsx
2870
2795
  var import_react14 = require("react");
2871
- var import_framer_motion4 = require("framer-motion");
2796
+ var import_framer_motion3 = require("framer-motion");
2872
2797
  var import_jsx_runtime25 = require("react/jsx-runtime");
2873
2798
  function modWrap(min, max, v) {
2874
2799
  const range = max - min;
@@ -2922,13 +2847,13 @@ var PaymentMethods = ({
2922
2847
  className,
2923
2848
  ...props
2924
2849
  }) => {
2925
- const { scrollY } = (0, import_framer_motion4.useScroll)();
2926
- const scrollVelocity = (0, import_framer_motion4.useVelocity)(scrollY);
2927
- const col1Y = (0, import_framer_motion4.useMotionValue)(0);
2928
- const col2Y = (0, import_framer_motion4.useMotionValue)(0);
2850
+ const { scrollY } = (0, import_framer_motion3.useScroll)();
2851
+ const scrollVelocity = (0, import_framer_motion3.useVelocity)(scrollY);
2852
+ const col1Y = (0, import_framer_motion3.useMotionValue)(0);
2853
+ const col2Y = (0, import_framer_motion3.useMotionValue)(0);
2929
2854
  const col1Ref = (0, import_react14.useRef)(null);
2930
2855
  const col2Ref = (0, import_react14.useRef)(null);
2931
- (0, import_framer_motion4.useAnimationFrame)((_, delta) => {
2856
+ (0, import_framer_motion3.useAnimationFrame)((_, delta) => {
2932
2857
  const raw = scrollVelocity.get();
2933
2858
  if (Math.abs(raw) < DEADZONE) return;
2934
2859
  const clamped = Math.sign(raw) * Math.min(Math.abs(raw), MAX_SCROLL_V);
@@ -2949,7 +2874,7 @@ var PaymentMethods = ({
2949
2874
  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pm__media", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "pm__carousel", children: [
2950
2875
  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pm__fade pm__fade--top", "aria-hidden": "true" }),
2951
2876
  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
2952
- import_framer_motion4.motion.div,
2877
+ import_framer_motion3.motion.div,
2953
2878
  {
2954
2879
  ref: col1Ref,
2955
2880
  className: "pm__col",
@@ -2966,7 +2891,7 @@ var PaymentMethods = ({
2966
2891
  }
2967
2892
  ),
2968
2893
  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
2969
- import_framer_motion4.motion.div,
2894
+ import_framer_motion3.motion.div,
2970
2895
  {
2971
2896
  ref: col2Ref,
2972
2897
  className: "pm__col",