@deriv-web-design/ui 0.0.7 → 0.0.8

package/dist/index.js

@@ -2304,98 +2304,26 @@ var CTABanner = ({
 
 // components/Navbar/Navbar.tsx
 var import_react12 = require("react");
-var import_framer_motion2 = require("framer-motion");
 
 // assets/icon-globe.svg
 var icon_globe_default = "./icon-globe-S54WYYEK.svg";
 
 // components/Navbar/Navbar.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var EASE_OUT_EXPO = [0.16, 1, 0.3, 1];
-var dropdownVariants = {
-  hidden: { opacity: 0, scale: 0.96, y: -8 },
-  visible: { opacity: 1, scale: 1, y: 0 }
-};
-var drawerVariants = {
-  hidden: { y: "-100%" },
-  visible: { y: 0 }
-};
-var accordionVariants = {
-  hidden: { height: 0, opacity: 0 },
-  visible: { height: "auto", opacity: 1 }
-};
-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"
-      }
-    )
-  }
-);
-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"
-  }
-) });
-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"
-  }
-) });
-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"
-  }
-) });
-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"
-  }
-) });
+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" }) });
+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" }) });
+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" }) });
+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" }) });
+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" }) });
+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" }) });
 var GlobeIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: icon_globe_default, alt: "", "aria-hidden": "true", width: "20", height: "20", className });
-var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
+var DropdownPanel = ({ item, isOpen, onMouseEnter, onMouseLeave }) => {
   const { dropdown } = item;
   if (!dropdown) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_framer_motion2.motion.div,
+    "div",
     {
-      className: "navbar__dropdown",
-      variants: dropdownVariants,
-      initial: "hidden",
-      animate: "visible",
-      exit: "hidden",
-      transition: { duration: 0.18, ease: EASE_OUT_EXPO },
+      className: ["navbar__dropdown", isOpen ? "navbar__dropdown--open" : ""].filter(Boolean).join(" "),
       onMouseEnter,
       onMouseLeave,
       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__dropdown-inner", children: [
@@ -2427,32 +2355,17 @@ var FeatureCard = ({ feature, mobile }) => /* @__PURE__ */ (0, import_jsx_runtim
     className: mobile ? "navbar__drawer-feature" : "navbar__dropdown-feature",
     style: feature.backgroundImageUrl ? { backgroundImage: `url(${feature.backgroundImageUrl})` } : void 0,
     children: [
-      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"
-        }
-      ),
+      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" }),
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: mobile ? "navbar__drawer-feature-overlay" : "navbar__dropdown-feature-overlay", "aria-hidden": "true" }),
       /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: mobile ? "navbar__drawer-feature-content" : "navbar__dropdown-feature-content", children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: mobile ? "navbar__drawer-feature-title" : "navbar__dropdown-feature-title", children: feature.title }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: mobile ? "navbar__drawer-feature-desc" : "navbar__dropdown-feature-desc", children: feature.description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-          "a",
-          {
-            href: feature.ctaHref,
-            className: mobile ? "navbar__drawer-feature-cta" : "navbar__dropdown-feature-cta",
-            children: [
-              feature.ctaLabel,
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowRightIcon, {})
-            ]
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("a", { href: feature.ctaHref, className: mobile ? "navbar__drawer-feature-cta" : "navbar__dropdown-feature-cta", children: [
+          feature.ctaLabel,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowRightIcon, {})
+        ] })
       ] })
     ]
   }
@@ -2463,7 +2376,7 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "button",
       {
-        className: `navbar__drawer-trigger ${isOpen ? "navbar__drawer-trigger--open" : ""}`,
+        className: ["navbar__drawer-trigger", isOpen ? "navbar__drawer-trigger--open" : ""].filter(Boolean).join(" "),
         onClick: onToggle,
         "aria-expanded": isOpen,
         children: [
@@ -2472,34 +2385,23 @@ var DrawerAccordion = ({ item, isOpen, onToggle }) => {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion2.AnimatePresence, { initial: false, children: isOpen && dropdown && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      import_framer_motion2.motion.div,
-      {
-        className: "navbar__drawer-panel",
-        variants: accordionVariants,
-        initial: "hidden",
-        animate: "visible",
-        exit: "hidden",
-        transition: { duration: 0.22, ease: EASE_OUT_EXPO },
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-panel-inner", children: [
-          /* @__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: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "navbar__drawer-col-title", children: section.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-col-links", children: section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              "a",
-              {
-                href: link.href,
-                className: "navbar__drawer-link",
-                target: link.external ? "_blank" : void 0,
-                rel: link.external ? "noopener noreferrer" : void 0,
-                children: link.label
-              },
-              link.href
-            )) })
-          ] }, section.title)) }, colIdx)) }),
-          dropdown.feature && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FeatureCard, { feature: dropdown.feature, mobile: true })
-        ] })
-      }
-    ) })
+    /* @__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: [
+      /* @__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: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "navbar__drawer-col-title", children: section.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-col-links", children: section.items.map((link) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "a",
+          {
+            href: link.href,
+            className: "navbar__drawer-link",
+            target: link.external ? "_blank" : void 0,
+            rel: link.external ? "noopener noreferrer" : void 0,
+            children: link.label
+          },
+          link.href
+        )) })
+      ] }, section.title)) }, colIdx)) }),
+      dropdown?.feature && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FeatureCard, { feature: dropdown.feature, mobile: true })
+    ] }) })
   ] });
 };
 var Navbar = ({
@@ -2512,6 +2414,7 @@ var Navbar = ({
   loginHref,
   ctaLabel = "Open account",
   ctaHref,
+  languages,
   languageLabel,
   onLanguageClick,
   className,
@@ -2521,9 +2424,15 @@ var Navbar = ({
   const [mobileOpen, setMobileOpen] = (0, import_react12.useState)(false);
   const [mobileExpanded, setMobileExpanded] = (0, import_react12.useState)(null);
   const [scrolled, setScrolled] = (0, import_react12.useState)(false);
+  const [langOpen, setLangOpen] = (0, import_react12.useState)(false);
+  const [mobileLangOpen, setMobileLangOpen] = (0, import_react12.useState)(false);
   const hoverTimeoutRef = (0, import_react12.useRef)(null);
+  const langTimeoutRef = (0, import_react12.useRef)(null);
   const pillAreaRef = (0, import_react12.useRef)(null);
+  const langWrapperRef = (0, import_react12.useRef)(null);
   const resolvedLogo = theme === "light" ? logoSrcDark ?? logoSrc : logoSrc;
+  const activeLanguage = languages?.find((l) => l.active);
+  const displayLabel = activeLanguage?.code ?? languageLabel;
   (0, import_react12.useEffect)(() => {
     const onScroll = () => setScrolled(window.scrollY > 0);
     window.addEventListener("scroll", onScroll, { passive: true });
@@ -2534,6 +2443,7 @@ var Navbar = ({
       if (e.key === "Escape") {
         setOpenDropdown(null);
         setMobileOpen(false);
+        setLangOpen(false);
       }
     };
     document.addEventListener("keydown", onKey);
@@ -2555,6 +2465,16 @@ var Navbar = ({
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, [openDropdown]);
+  (0, import_react12.useEffect)(() => {
+    if (!langOpen) return;
+    const onPointerDown = (e) => {
+      if (langWrapperRef.current && !langWrapperRef.current.contains(e.target)) {
+        setLangOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [langOpen]);
   const clearHoverTimeout = (0, import_react12.useCallback)(() => {
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
@@ -2569,7 +2489,11 @@ var Navbar = ({
     clearHoverTimeout();
     hoverTimeoutRef.current = setTimeout(() => setOpenDropdown(null), 120);
   }, [clearHoverTimeout]);
-  const activeDropdownItem = navItems.find((item) => item.label === openDropdown);
+  const handleLangSelect = (0, import_react12.useCallback)((lang) => {
+    lang.onClick();
+    setLangOpen(false);
+    setMobileLangOpen(false);
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "nav",
     {
@@ -2583,29 +2507,16 @@ var Navbar = ({
             /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__nav-group", children: [
               navItems.map((item) => {
                 if (item.external) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-                    "a",
-                    {
-                      href: item.href,
-                      className: "navbar__nav-item",
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      children: [
-                        item.label,
-                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowUpRightIcon, {})
-                      ]
-                    },
-                    item.label
-                  );
+                  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("a", { href: item.href, className: "navbar__nav-item", target: "_blank", rel: "noopener noreferrer", children: [
+                    item.label,
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowUpRightIcon, {})
+                  ] }, item.label);
                 }
                 if (item.dropdown) {
                   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                     "button",
                     {
-                      className: [
-                        "navbar__nav-item",
-                        openDropdown === item.label ? "navbar__nav-item--open" : ""
-                      ].filter(Boolean).join(" "),
+                      className: ["navbar__nav-item", openDropdown === item.label ? "navbar__nav-item--open" : ""].filter(Boolean).join(" "),
                       onMouseEnter: () => handleNavEnter(item.label),
                       onMouseLeave: handleNavLeave,
                       "aria-expanded": openDropdown === item.label,
@@ -2620,45 +2531,74 @@ var Navbar = ({
                 }
                 return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: item.href, className: "navbar__nav-item", children: item.label }, item.label);
               }),
-              languageLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { className: "navbar__nav-item navbar__lang-btn", onClick: onLanguageClick, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
-                languageLabel
-              ] })
+              displayLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                "div",
+                {
+                  className: "navbar__lang-wrapper",
+                  ref: langWrapperRef,
+                  onMouseEnter: () => {
+                    if (langTimeoutRef.current) clearTimeout(langTimeoutRef.current);
+                    if (languages && languages.length > 0) setLangOpen(true);
+                  },
+                  onMouseLeave: () => {
+                    langTimeoutRef.current = setTimeout(() => setLangOpen(false), 150);
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                      "button",
+                      {
+                        className: ["navbar__nav-item", "navbar__lang-btn", langOpen ? "navbar__nav-item--open" : ""].filter(Boolean).join(" "),
+                        onClick: () => {
+                          if (!languages || languages.length === 0) onLanguageClick?.();
+                        },
+                        "aria-expanded": languages ? langOpen : void 0,
+                        "aria-haspopup": languages ? "listbox" : void 0,
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
+                          displayLabel,
+                          languages && languages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronDownIcon3, { className: "navbar__nav-item__chevron" })
+                        ]
+                      }
+                    ),
+                    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)(
+                      "button",
+                      {
+                        className: ["navbar__lang-option", lang.active ? "navbar__lang-option--active" : ""].filter(Boolean).join(" "),
+                        onClick: () => handleLangSelect(lang),
+                        role: "option",
+                        "aria-selected": lang.active,
+                        children: [
+                          lang.label,
+                          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowRightSmIcon, {})
+                        ]
+                      },
+                      lang.code
+                    )) })
+                  ]
+                }
+              )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__pill-actions", children: [
               loginHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
               ctaHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
             ] })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion2.AnimatePresence, { children: openDropdown && activeDropdownItem?.dropdown && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          navItems.map((item) => item.dropdown ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             DropdownPanel,
             {
-              item: activeDropdownItem,
+              item,
+              isOpen: openDropdown === item.label,
               onMouseEnter: clearHoverTimeout,
               onMouseLeave: handleNavLeave
             },
-            "dropdown"
-          ) }),
+            item.label
+          ) : null),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__actions", children: [
-            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
-              }
-            ) }),
+            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 }) }),
             ctaHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__mobile-actions", children: [
-            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
-              }
-            ) }),
+            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 }) }),
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "button",
               {
@@ -2670,77 +2610,66 @@ var Navbar = ({
             )
           ] })
         ] }),
-        /* @__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)(
-          import_framer_motion2.motion.div,
-          {
-            className: "navbar__drawer",
-            variants: drawerVariants,
-            initial: "hidden",
-            animate: "visible",
-            exit: "hidden",
-            transition: { duration: 0.3, ease: EASE_OUT_EXPO },
-            "aria-modal": "true",
-            role: "dialog",
-            "aria-label": "Navigation menu",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("nav", { className: "navbar__drawer-nav", children: [
-                navItems.map((item) => {
-                  if (item.dropdown) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                      DrawerAccordion,
-                      {
-                        item,
-                        isOpen: mobileExpanded === item.label,
-                        onToggle: () => setMobileExpanded(
-                          (prev) => prev === item.label ? null : item.label
-                        )
-                      },
-                      item.label
-                    );
-                  }
-                  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: [
-                        item.label,
-                        item.external && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowUpRightIcon, {})
-                      ]
-                    },
-                    item.label
-                  );
-                }),
-                languageLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { className: "navbar__drawer-lang", onClick: onLanguageClick, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
-                  languageLabel
-                ] })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-footer", children: [
-                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
-                  }
-                ) }),
-                ctaHref && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: ctaHref, style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                  Button,
+        /* @__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: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("nav", { className: "navbar__drawer-nav", children: [
+            navItems.map((item) => {
+              if (item.dropdown) {
+                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  DrawerAccordion,
                   {
-                    colorScheme: "coral",
-                    variant: "primary",
-                    label: ctaLabel,
-                    fullWidth: true
-                  }
-                ) })
-              ] })
-            ]
-          }
-        ) }) })
+                    item,
+                    isOpen: mobileExpanded === item.label,
+                    onToggle: () => setMobileExpanded((prev) => prev === item.label ? null : item.label)
+                  },
+                  item.label
+                );
+              }
+              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: [
+                item.label,
+                item.external && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowUpRightIcon, {})
+              ] }, item.label);
+            }),
+            displayLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-item", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                "button",
+                {
+                  className: ["navbar__drawer-trigger", mobileLangOpen ? "navbar__drawer-trigger--open" : ""].filter(Boolean).join(" "),
+                  onClick: () => {
+                    if (languages && languages.length > 0) {
+                      setMobileLangOpen((o) => !o);
+                    } else {
+                      onLanguageClick?.();
+                    }
+                  },
+                  "aria-expanded": languages ? mobileLangOpen : void 0,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "navbar__drawer-lang-label", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobeIcon, { className: "navbar__lang-globe navbar__lang-globe--dark" }),
+                      displayLabel
+                    ] }),
+                    languages && languages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronDownIcon3, { className: "navbar__drawer-trigger__chevron" })
+                  ]
+                }
+              ),
+              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)(
+                "button",
+                {
+                  className: ["navbar__drawer-lang-option", lang.active ? "navbar__drawer-lang-option--active" : ""].filter(Boolean).join(" "),
+                  onClick: () => handleLangSelect(lang),
+                  children: [
+                    lang.label,
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ArrowRightSmIcon, {})
+                  ]
+                },
+                lang.code
+              )) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "navbar__drawer-footer", children: [
+            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 }) }),
+            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 }) })
+          ] })
+        ] }) })
       ]
     }
   );
@@ -2748,7 +2677,7 @@ var Navbar = ({
 
 // templates/DayNightTransition/DayNightTransition.tsx
 var import_react13 = require("react");
-var import_framer_motion3 = require("framer-motion");
+var import_framer_motion2 = require("framer-motion");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var SPRING2 = { stiffness: 80, damping: 30, restDelta: 1e-3 };
 var FADE_START = 0.35;
@@ -2770,16 +2699,16 @@ var DayNightTransition = ({
   ...props
 }) => {
   const wrapperRef = (0, import_react13.useRef)(null);
-  const { scrollYProgress } = (0, import_framer_motion3.useScroll)({
+  const { scrollYProgress } = (0, import_framer_motion2.useScroll)({
     target: wrapperRef,
     offset: ["start end", "end start"]
   });
-  const smooth = (0, import_framer_motion3.useSpring)(scrollYProgress, SPRING2);
-  const nightOpacity = (0, import_framer_motion3.useTransform)(smooth, [FADE_START, FADE_END], [0, 1]);
-  const channel = (0, import_framer_motion3.useTransform)(smooth, [FADE_START, FADE_END], [TEXT_CHANNEL_DAY, TEXT_CHANNEL_NIGHT]);
-  const textColor = import_framer_motion3.useMotionTemplate`rgb(${channel}, ${channel}, ${channel})`;
-  const dayOpacity = (0, import_framer_motion3.useTransform)(smooth, [WORD_START, WORD_END], [1, 0]);
-  const nightOpacity2 = (0, import_framer_motion3.useTransform)(smooth, [WORD_START, WORD_END], [0, 1]);
+  const smooth = (0, import_framer_motion2.useSpring)(scrollYProgress, SPRING2);
+  const nightOpacity = (0, import_framer_motion2.useTransform)(smooth, [FADE_START, FADE_END], [0, 1]);
+  const channel = (0, import_framer_motion2.useTransform)(smooth, [FADE_START, FADE_END], [TEXT_CHANNEL_DAY, TEXT_CHANNEL_NIGHT]);
+  const textColor = import_framer_motion2.useMotionTemplate`rgb(${channel}, ${channel}, ${channel})`;
+  const dayOpacity = (0, import_framer_motion2.useTransform)(smooth, [WORD_START, WORD_END], [1, 0]);
+  const nightOpacity2 = (0, import_framer_motion2.useTransform)(smooth, [WORD_START, WORD_END], [0, 1]);
   const hasDescription = Boolean(dayDescription || nightDescription);
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
@@ -2799,7 +2728,7 @@ var DayNightTransition = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          import_framer_motion3.motion.img,
+          import_framer_motion2.motion.img,
           {
             className: "dnt__bg dnt__bg--night",
             src: nightImageUrl,
@@ -2810,14 +2739,14 @@ var DayNightTransition = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "dnt__content", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-          import_framer_motion3.motion.div,
+          import_framer_motion2.motion.div,
           {
             className: "dnt__text-wrap",
             style: { color: textColor },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  import_framer_motion3.motion.h2,
+                  import_framer_motion2.motion.h2,
                   {
                     className: "dnt__headline",
                     style: { opacity: dayOpacity },
@@ -2825,7 +2754,7 @@ var DayNightTransition = ({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  import_framer_motion3.motion.h2,
+                  import_framer_motion2.motion.h2,
                   {
                     className: "dnt__headline",
                     "aria-hidden": "true",
@@ -2836,7 +2765,7 @@ var DayNightTransition = ({
               ] }),
               hasDescription && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "dnt__crossfade-wrap", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  import_framer_motion3.motion.p,
+                  import_framer_motion2.motion.p,
                   {
                     className: "dnt__description",
                     style: { opacity: dayOpacity },
@@ -2844,7 +2773,7 @@ var DayNightTransition = ({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  import_framer_motion3.motion.p,
+                  import_framer_motion2.motion.p,
                   {
                     className: "dnt__description",
                     "aria-hidden": "true",
@@ -2864,7 +2793,7 @@ var DayNightTransition = ({
 
 // templates/PaymentMethods/PaymentMethods.tsx
 var import_react14 = require("react");
-var import_framer_motion4 = require("framer-motion");
+var import_framer_motion3 = require("framer-motion");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function modWrap(min, max, v) {
   const range = max - min;
@@ -2918,13 +2847,13 @@ var PaymentMethods = ({
   className,
   ...props
 }) => {
-  const { scrollY } = (0, import_framer_motion4.useScroll)();
-  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 { scrollY } = (0, import_framer_motion3.useScroll)();
+  const scrollVelocity = (0, import_framer_motion3.useVelocity)(scrollY);
+  const col1Y = (0, import_framer_motion3.useMotionValue)(0);
+  const col2Y = (0, import_framer_motion3.useMotionValue)(0);
   const col1Ref = (0, import_react14.useRef)(null);
   const col2Ref = (0, import_react14.useRef)(null);
-  (0, import_framer_motion4.useAnimationFrame)((_, delta) => {
+  (0, import_framer_motion3.useAnimationFrame)((_, delta) => {
     const raw = scrollVelocity.get();
     if (Math.abs(raw) < DEADZONE) return;
     const clamped = Math.sign(raw) * Math.min(Math.abs(raw), MAX_SCROLL_V);
@@ -2945,7 +2874,7 @@ var PaymentMethods = ({
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pm__media", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "pm__carousel", children: [
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pm__fade pm__fade--top", "aria-hidden": "true" }),
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            import_framer_motion4.motion.div,
+            import_framer_motion3.motion.div,
             {
               ref: col1Ref,
               className: "pm__col",
@@ -2962,7 +2891,7 @@ var PaymentMethods = ({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            import_framer_motion4.motion.div,
+            import_framer_motion3.motion.div,
             {
               ref: col2Ref,
               className: "pm__col",