@deriv-web-design/ui 0.0.12 → 0.0.13

package/dist/index.d.mts

@@ -597,6 +597,12 @@ interface CTABannerProps extends HTMLAttributes<HTMLElement> {
 declare const AVATAR_DATA: AvatarItem[];
 declare const CTABanner: ({ headline, ctaLabel, ctaHref, avatars, variant, className, ...props }: CTABannerProps) => react_jsx_runtime.JSX.Element;
 
+interface LanguageItem {
+    /** Language code, e.g. "en", "ar", "fr" */
+    code: string;
+    /** Display label, e.g. "English", "العربية", "Français" */
+    label: string;
+}
 interface NavDropdownItem {
     /** Link text */
     label: string;
@@ -667,11 +673,18 @@ interface NavbarProps extends HTMLAttributes<HTMLElement> {
     ctaHref?: string;
     /** Language label rendered next to the globe icon, e.g. "EN" */
     languageLabel?: string;
-    /** Called when the language button is clicked */
+    /** Called when the language button is clicked (used when `languageItems` is NOT provided) */
     onLanguageClick?: () => void;
+    /** Languages for the hover-triggered dropdown grid.
+     *  When provided, a dropdown is shown instead of calling `onLanguageClick`. */
+    languageItems?: LanguageItem[];
+    /** Highlights the active language in the dropdown (matched by `LanguageItem.code`) */
+    activeLanguageCode?: string;
+    /** Called when a language is picked from the dropdown */
+    onLanguageSelect?: (code: string) => void;
 }
 
-declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languageLabel, onLanguageClick, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
+declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languageLabel, onLanguageClick, languageItems, activeLanguageCode, onLanguageSelect, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
 
 interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
     /** URL for the daytime background image */
@@ -719,4 +732,4 @@ declare const TEXT_CONTENT: {
 };
 declare const PaymentMethods: ({ headline, body, disclaimer, ctaLabel, ctaHref, col1Logos, col2Logos, className, ...props }: PaymentMethodsProps) => react_jsx_runtime.JSX.Element;
 
-export { AVATAR_DATA, Accordion, type AccordionProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, type FeatureCardItem, FeatureCards, type FeatureCardsProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, Link, type LinkColorScheme, type LinkProps, type LogoItem, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PaymentMethods, type PaymentMethodsProps, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant };
+export { AVATAR_DATA, Accordion, type AccordionProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, type FeatureCardItem, FeatureCards, type FeatureCardsProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PaymentMethods, type PaymentMethodsProps, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant };

package/dist/index.d.ts

@@ -597,6 +597,12 @@ interface CTABannerProps extends HTMLAttributes<HTMLElement> {
 declare const AVATAR_DATA: AvatarItem[];
 declare const CTABanner: ({ headline, ctaLabel, ctaHref, avatars, variant, className, ...props }: CTABannerProps) => react_jsx_runtime.JSX.Element;
 
+interface LanguageItem {
+    /** Language code, e.g. "en", "ar", "fr" */
+    code: string;
+    /** Display label, e.g. "English", "العربية", "Français" */
+    label: string;
+}
 interface NavDropdownItem {
     /** Link text */
     label: string;
@@ -667,11 +673,18 @@ interface NavbarProps extends HTMLAttributes<HTMLElement> {
     ctaHref?: string;
     /** Language label rendered next to the globe icon, e.g. "EN" */
     languageLabel?: string;
-    /** Called when the language button is clicked */
+    /** Called when the language button is clicked (used when `languageItems` is NOT provided) */
     onLanguageClick?: () => void;
+    /** Languages for the hover-triggered dropdown grid.
+     *  When provided, a dropdown is shown instead of calling `onLanguageClick`. */
+    languageItems?: LanguageItem[];
+    /** Highlights the active language in the dropdown (matched by `LanguageItem.code`) */
+    activeLanguageCode?: string;
+    /** Called when a language is picked from the dropdown */
+    onLanguageSelect?: (code: string) => void;
 }
 
-declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languageLabel, onLanguageClick, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
+declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languageLabel, onLanguageClick, languageItems, activeLanguageCode, onLanguageSelect, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
 
 interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
     /** URL for the daytime background image */
@@ -719,4 +732,4 @@ declare const TEXT_CONTENT: {
 };
 declare const PaymentMethods: ({ headline, body, disclaimer, ctaLabel, ctaHref, col1Logos, col2Logos, className, ...props }: PaymentMethodsProps) => react_jsx_runtime.JSX.Element;
 
-export { AVATAR_DATA, Accordion, type AccordionProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, type FeatureCardItem, FeatureCards, type FeatureCardsProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, Link, type LinkColorScheme, type LinkProps, type LogoItem, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PaymentMethods, type PaymentMethodsProps, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant };
+export { AVATAR_DATA, Accordion, type AccordionProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, type FeatureCardItem, FeatureCards, type FeatureCardsProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PaymentMethods, type PaymentMethodsProps, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant };

package/dist/index.js

@@ -1425,7 +1425,7 @@ var Hero = ({
   const variantClass = `hero--${variant}`;
   const textBlock = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "hero__text", children: [
     subtitle && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "hero__subtitle", children: subtitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "hero__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h2", { className: "hero__title", children: title }),
     description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "hero__description", children: description })
   ] });
   const buttonBlock = (primaryButton || secondaryButton) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "hero__buttons", children: [
@@ -2385,6 +2385,27 @@ var XMarkIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { wi
     strokeLinecap: "round"
   }
 ) });
+var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  "svg",
+  {
+    className,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "path",
+      {
+        d: "M15 18L9 12L15 6",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "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 }) => {
   const { dropdown } = item;
@@ -2516,6 +2537,9 @@ var Navbar = ({
   ctaHref,
   languageLabel,
   onLanguageClick,
+  languageItems,
+  activeLanguageCode,
+  onLanguageSelect,
   className,
   ...props
 }) => {
@@ -2523,8 +2547,13 @@ 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 [langDropdownOpen, setLangDropdownOpen] = (0, import_react12.useState)(false);
+  const [mobileLangOpen, setMobileLangOpen] = (0, import_react12.useState)(false);
   const hoverTimeoutRef = (0, import_react12.useRef)(null);
+  const langHoverTimeoutRef = (0, import_react12.useRef)(null);
   const pillAreaRef = (0, import_react12.useRef)(null);
+  const langBtnRef = (0, import_react12.useRef)(null);
+  const hasLangDropdown = Boolean(languageItems && languageItems.length > 0);
   const resolvedLogo = theme === "light" ? logoSrcDark ?? logoSrc : logoSrc;
   (0, import_react12.useEffect)(() => {
     const onScroll = () => setScrolled(window.scrollY > 0);
@@ -2536,11 +2565,15 @@ var Navbar = ({
       if (e.key === "Escape") {
         setOpenDropdown(null);
         setMobileOpen(false);
+        setMobileLangOpen(false);
       }
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, []);
+  (0, import_react12.useEffect)(() => {
+    if (!mobileOpen) setMobileLangOpen(false);
+  }, [mobileOpen]);
   (0, import_react12.useEffect)(() => {
     document.body.style.overflow = mobileOpen ? "hidden" : "";
     return () => {
@@ -2563,6 +2596,25 @@ var Navbar = ({
       hoverTimeoutRef.current = null;
     }
   }, []);
+  const clearLangHoverTimeout = (0, import_react12.useCallback)(() => {
+    if (langHoverTimeoutRef.current) {
+      clearTimeout(langHoverTimeoutRef.current);
+      langHoverTimeoutRef.current = null;
+    }
+  }, []);
+  const handleLangEnter = (0, import_react12.useCallback)(() => {
+    clearLangHoverTimeout();
+    setLangDropdownOpen(true);
+  }, [clearLangHoverTimeout]);
+  const handleLangLeave = (0, import_react12.useCallback)(() => {
+    clearLangHoverTimeout();
+    langHoverTimeoutRef.current = setTimeout(() => setLangDropdownOpen(false), 150);
+  }, [clearLangHoverTimeout]);
+  const handleLangSelect = (0, import_react12.useCallback)((code) => {
+    setLangDropdownOpen(false);
+    setMobileLangOpen(false);
+    onLanguageSelect?.(code);
+  }, [onLanguageSelect]);
   const handleNavEnter = (0, import_react12.useCallback)((label) => {
     clearHoverTimeout();
     setOpenDropdown(label);
@@ -2622,10 +2674,28 @@ 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
-              ] })
+              languageLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "div",
+                {
+                  className: "navbar__lang-wrapper",
+                  onMouseEnter: hasLangDropdown ? handleLangEnter : void 0,
+                  onMouseLeave: hasLangDropdown ? handleLangLeave : void 0,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                    "button",
+                    {
+                      ref: langBtnRef,
+                      className: "navbar__nav-item navbar__lang-btn",
+                      onClick: hasLangDropdown ? () => setLangDropdownOpen((o) => !o) : onLanguageClick,
+                      "aria-haspopup": hasLangDropdown ? "true" : void 0,
+                      "aria-expanded": hasLangDropdown ? langDropdownOpen : void 0,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobeIcon, { className: "navbar__lang-globe" }),
+                        languageLabel
+                      ]
+                    }
+                  )
+                }
+              )
             ] }),
             /* @__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 }) }),
@@ -2641,6 +2711,38 @@ var Navbar = ({
             },
             "dropdown"
           ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion2.AnimatePresence, { children: hasLangDropdown && langDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_framer_motion2.motion.div,
+            {
+              className: "navbar__lang-dropdown",
+              variants: dropdownVariants,
+              initial: "hidden",
+              animate: "visible",
+              exit: "hidden",
+              transition: { duration: 0.18, ease: EASE_OUT_EXPO },
+              onMouseEnter: clearLangHoverTimeout,
+              onMouseLeave: handleLangLeave,
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "div",
+                {
+                  className: "navbar__lang-dropdown-grid",
+                  style: { "--lang-rows": Math.ceil(languageItems.length / 3) },
+                  children: languageItems.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    "button",
+                    {
+                      className: [
+                        "navbar__lang-dropdown-item",
+                        lang.code === activeLanguageCode ? "navbar__lang-dropdown-item--active" : ""
+                      ].filter(Boolean).join(" "),
+                      onClick: () => handleLangSelect(lang.code),
+                      children: lang.label
+                    },
+                    lang.code
+                  ))
+                }
+              )
+            }
+          ) }),
           /* @__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,
@@ -2715,12 +2817,23 @@ var Navbar = ({
                     item.label
                   );
                 }),
-                languageLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { className: "navbar__drawer-lang", onClick: onLanguageClick, children: [
+                languageLabel && !hasLangDropdown && /* @__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
-                ] })
+                ] }),
+                languageLabel && hasLangDropdown && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                  "button",
+                  {
+                    className: "navbar__drawer-lang",
+                    onClick: () => setMobileLangOpen(true),
+                    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: [
+              !mobileLangOpen && /* @__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,
                   {
@@ -2739,7 +2852,40 @@ var Navbar = ({
                     fullWidth: true
                   }
                 ) })
-              ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion2.AnimatePresence, { children: hasLangDropdown && mobileLangOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                import_framer_motion2.motion.div,
+                {
+                  className: "navbar__drawer-lang-panel",
+                  initial: { y: "100%" },
+                  animate: { y: 0 },
+                  exit: { y: "100%" },
+                  transition: { duration: 0.25, ease: EASE_OUT_EXPO },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      "button",
+                      {
+                        className: "navbar__drawer-lang-back",
+                        onClick: () => setMobileLangOpen(false),
+                        "aria-label": "Back to menu",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronLeftIcon, {})
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "navbar__drawer-lang-grid", children: languageItems.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      "button",
+                      {
+                        className: [
+                          "navbar__drawer-lang-item",
+                          lang.code === activeLanguageCode ? "navbar__drawer-lang-item--active" : ""
+                        ].filter(Boolean).join(" "),
+                        onClick: () => handleLangSelect(lang.code),
+                        children: lang.label
+                      },
+                      lang.code
+                    )) })
+                  ]
+                }
+              ) })
             ]
           }
         ) }) })