@asafarim/shared-i18n 0.6.6 → 0.8.0

package/demo/node_modules/.vite/deps/@asafarim_country-language-selector.js

@@ -0,0 +1,848 @@
+import {
+  require_jsx_runtime
+} from "./chunk-E6BG6WAU.js";
+import {
+  require_react
+} from "./chunk-B3AHR5EX.js";
+import {
+  __toESM
+} from "./chunk-5WRI5ZAA.js";
+
+// ../node_modules/.pnpm/@asafarim+country-language-_049cb8b81291b08ccd85a4446ad76c74/node_modules/@asafarim/country-language-selector/dist/index.js
+var import_react = __toESM(require_react());
+var import_jsx_runtime = __toESM(require_jsx_runtime());
+var defaultStrings = {
+  ariaLabel: "Select country and language",
+  searchPlaceholder: "Search country…",
+  emptyResults: "No matching countries",
+  chooseCountry: "Country",
+  chooseLanguage: "Language",
+  backToCountries: "Back",
+  close: "Close"
+};
+var L = {
+  en: { code: "en", label: "English", nativeLabel: "English" },
+  nl: { code: "nl", label: "Dutch", nativeLabel: "Nederlands" },
+  fr: { code: "fr", label: "French", nativeLabel: "Français" },
+  de: { code: "de", label: "German", nativeLabel: "Deutsch" },
+  es: { code: "es", label: "Spanish", nativeLabel: "Español" },
+  it: { code: "it", label: "Italian", nativeLabel: "Italiano" },
+  pt: { code: "pt", label: "Portuguese", nativeLabel: "Português" },
+  sv: { code: "sv", label: "Swedish", nativeLabel: "Svenska" },
+  da: { code: "da", label: "Danish", nativeLabel: "Dansk" },
+  no: { code: "no", label: "Norwegian", nativeLabel: "Norsk" },
+  fi: { code: "fi", label: "Finnish", nativeLabel: "Suomi" },
+  pl: { code: "pl", label: "Polish", nativeLabel: "Polski" },
+  ja: { code: "ja", label: "Japanese", nativeLabel: "日本語" },
+  zh: { code: "zh", label: "Chinese", nativeLabel: "中文" },
+  ar: { code: "ar", label: "Arabic", nativeLabel: "العربية" },
+  tr: { code: "tr", label: "Turkish", nativeLabel: "Türkçe" },
+  ru: { code: "ru", label: "Russian", nativeLabel: "Русский" },
+  ko: { code: "ko", label: "Korean", nativeLabel: "한국어" },
+  hi: { code: "hi", label: "Hindi", nativeLabel: "हिन्दी" },
+  fa: { code: "fa", label: "Persian", nativeLabel: "فارسی" }
+};
+var defaultCountries = [
+  {
+    code: "BE",
+    name: "Belgium",
+    nativeName: "België",
+    flag: "🇧🇪",
+    languages: [L.nl, L.fr, L.de, L.en]
+  },
+  {
+    code: "NL",
+    name: "Netherlands",
+    nativeName: "Nederland",
+    flag: "🇳🇱",
+    languages: [L.nl, L.en]
+  },
+  {
+    code: "FR",
+    name: "France",
+    nativeName: "France",
+    flag: "🇫🇷",
+    languages: [L.fr, L.en]
+  },
+  {
+    code: "DE",
+    name: "Germany",
+    nativeName: "Deutschland",
+    flag: "🇩🇪",
+    languages: [L.de, L.en]
+  },
+  {
+    code: "CH",
+    name: "Switzerland",
+    nativeName: "Schweiz",
+    flag: "🇨🇭",
+    languages: [L.de, L.fr, L.it, L.en]
+  },
+  {
+    code: "LU",
+    name: "Luxembourg",
+    nativeName: "Lëtzebuerg",
+    flag: "🇱🇺",
+    languages: [L.fr, L.de, L.en]
+  },
+  {
+    code: "CA",
+    name: "Canada",
+    nativeName: "Canada",
+    flag: "🇨🇦",
+    languages: [L.en, L.fr]
+  },
+  {
+    code: "US",
+    name: "United States",
+    flag: "🇺🇸",
+    languages: [L.en, L.es]
+  },
+  {
+    code: "GB",
+    name: "United Kingdom",
+    flag: "🇬🇧",
+    languages: [L.en]
+  },
+  {
+    code: "ES",
+    name: "Spain",
+    nativeName: "España",
+    flag: "🇪🇸",
+    languages: [L.es, L.en]
+  },
+  {
+    code: "IT",
+    name: "Italy",
+    nativeName: "Italia",
+    flag: "🇮🇹",
+    languages: [L.it, L.en]
+  },
+  {
+    code: "PT",
+    name: "Portugal",
+    flag: "🇵🇹",
+    languages: [L.pt, L.en]
+  },
+  {
+    code: "SE",
+    name: "Sweden",
+    nativeName: "Sverige",
+    flag: "🇸🇪",
+    languages: [L.sv, L.en]
+  },
+  {
+    code: "DK",
+    name: "Denmark",
+    nativeName: "Danmark",
+    flag: "🇩🇰",
+    languages: [L.da, L.en]
+  },
+  {
+    code: "NO",
+    name: "Norway",
+    nativeName: "Norge",
+    flag: "🇳🇴",
+    languages: [L.no, L.en]
+  },
+  {
+    code: "FI",
+    name: "Finland",
+    nativeName: "Suomi",
+    flag: "🇫🇮",
+    languages: [L.fi, L.sv, L.en]
+  },
+  {
+    code: "PL",
+    name: "Poland",
+    nativeName: "Polska",
+    flag: "🇵🇱",
+    languages: [L.pl, L.en]
+  },
+  {
+    code: "JP",
+    name: "Japan",
+    nativeName: "日本",
+    flag: "🇯🇵",
+    languages: [L.ja, L.en]
+  },
+  {
+    code: "CN",
+    name: "China",
+    nativeName: "中国",
+    flag: "🇨🇳",
+    languages: [L.zh, L.en]
+  },
+  {
+    code: "KR",
+    name: "South Korea",
+    nativeName: "대한민국",
+    flag: "🇰🇷",
+    languages: [L.ko, L.en]
+  },
+  {
+    code: "IN",
+    name: "India",
+    flag: "🇮🇳",
+    languages: [L.hi, L.en]
+  },
+  {
+    code: "TR",
+    name: "Türkiye",
+    nativeName: "Türkiye",
+    flag: "🇹🇷",
+    languages: [L.tr, L.en]
+  },
+  {
+    code: "RU",
+    name: "Russia",
+    nativeName: "Россия",
+    flag: "🇷🇺",
+    languages: [L.ru, L.en]
+  },
+  {
+    code: "IR",
+    name: "Iran",
+    nativeName: "ایران",
+    flag: "🇮🇷",
+    languages: [L.fa, L.en]
+  },
+  {
+    code: "SA",
+    name: "Saudi Arabia",
+    nativeName: "السعودية",
+    flag: "🇸🇦",
+    languages: [L.ar, L.en]
+  },
+  {
+    code: "AE",
+    name: "United Arab Emirates",
+    flag: "🇦🇪",
+    languages: [L.ar, L.en]
+  },
+  {
+    code: "BR",
+    name: "Brazil",
+    nativeName: "Brasil",
+    flag: "🇧🇷",
+    languages: [L.pt, L.en]
+  },
+  {
+    code: "MX",
+    name: "Mexico",
+    nativeName: "México",
+    flag: "🇲🇽",
+    languages: [L.es, L.en]
+  }
+];
+var languageCatalogue = L;
+var isBrowser = () => typeof window !== "undefined" && typeof document !== "undefined";
+function readStorage(key) {
+  if (!isBrowser()) return null;
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function writeStorage(key, value) {
+  if (!isBrowser()) return;
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function isCoarsePointer() {
+  var _a;
+  if (!isBrowser()) return false;
+  return ((_a = window.matchMedia) == null ? void 0 : _a.call(window, "(pointer: coarse)").matches) ?? false;
+}
+function useCountryLanguage(args) {
+  const { countries, value, defaultValue, onChange, persistKey } = args;
+  const isControlled = value !== void 0;
+  const initialRef = (0, import_react.useRef)(null);
+  if (initialRef.current === null) {
+    initialRef.current = (defaultValue && isValidLocale(defaultValue, countries) ? defaultValue : null) ?? fallbackLocale(countries);
+  }
+  const [internal, setInternal] = (0, import_react.useState)(initialRef.current);
+  const current = isControlled ? value : internal;
+  const didInitRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (didInitRef.current) return;
+    didInitRef.current = true;
+    if (!isControlled && persistKey) {
+      const hydrated = readPersistedLocale(persistKey, countries);
+      if (hydrated) {
+        setInternal(hydrated);
+        onChange == null ? void 0 : onChange(hydrated, { reason: "init", previous: initialRef.current });
+        return;
+      }
+    }
+    onChange == null ? void 0 : onChange(current, { reason: "init", previous: null });
+  }, []);
+  const byCode = (0, import_react.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const c of countries) map.set(c.code, c);
+    return map;
+  }, [countries]);
+  const country = byCode.get(current.country) ?? countries[0];
+  const language = country.languages.find((l) => l.code === current.language) ?? country.languages[0];
+  const commit = (0, import_react.useCallback)(
+    (next, reason) => {
+      const previous = current;
+      if (!isControlled) setInternal(next);
+      if (persistKey && !isControlled) {
+        writeStorage(persistKey, JSON.stringify(next));
+      }
+      onChange == null ? void 0 : onChange(next, { reason, previous });
+    },
+    [current, isControlled, onChange, persistKey]
+  );
+  const setCountry = (0, import_react.useCallback)(
+    (code) => {
+      const nextCountry = byCode.get(code);
+      if (!nextCountry) return;
+      const keep = nextCountry.languages.find(
+        (l) => l.code === current.language
+      );
+      const nextLanguage = (keep ?? nextCountry.languages[0]).code;
+      commit({ country: nextCountry.code, language: nextLanguage }, "country");
+    },
+    [byCode, commit, current.language]
+  );
+  const setLanguage = (0, import_react.useCallback)(
+    (code) => {
+      if (!country.languages.some((l) => l.code === code)) return;
+      commit({ country: country.code, language: code }, "language");
+    },
+    [commit, country]
+  );
+  const setLocale = (0, import_react.useCallback)(
+    (next, reason = "country") => {
+      commit(next, reason);
+    },
+    [commit]
+  );
+  return {
+    locale: { country: country.code, language: language.code },
+    country,
+    language,
+    setCountry,
+    setLanguage,
+    setLocale,
+    needsLanguageChoice: country.languages.length > 1
+  };
+}
+function readPersistedLocale(key, countries) {
+  const raw = readStorage(key);
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    return isValidLocale(parsed, countries) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function isValidLocale(locale, countries) {
+  const c = countries.find((x) => x.code === locale.country);
+  if (!c) return false;
+  return c.languages.some((l) => l.code === locale.language);
+}
+function fallbackLocale(countries) {
+  const first = countries[0];
+  if (!first) {
+    throw new Error(
+      "[country-language-selector] `countries` must contain at least one entry."
+    );
+  }
+  return { country: first.code, language: first.languages[0].code };
+}
+function useClickOutside(refs, enabled, handler) {
+  (0, import_react.useEffect)(() => {
+    if (!enabled) return;
+    const isInside = (target) => {
+      if (!target) return false;
+      return refs.some((ref) => {
+        const el = ref.current;
+        return !!el && el.contains(target);
+      });
+    };
+    const onPointer = (event) => {
+      if (!isInside(event.target)) handler(event);
+    };
+    const onKey = (event) => {
+      if (event.key === "Escape") handler(event);
+    };
+    document.addEventListener("pointerdown", onPointer, true);
+    document.addEventListener("keydown", onKey, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointer, true);
+      document.removeEventListener("keydown", onKey, true);
+    };
+  }, [enabled, handler, refs]);
+}
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "textarea:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function useFocusTrap(container, enabled) {
+  (0, import_react.useEffect)(() => {
+    if (!enabled) return;
+    const node = container.current;
+    if (!node) return;
+    const onKey = (event) => {
+      if (event.key !== "Tab") return;
+      const focusable = Array.from(
+        node.querySelectorAll(FOCUSABLE_SELECTOR)
+      ).filter((el) => !el.hasAttribute("data-focus-skip"));
+      if (focusable.length === 0) {
+        event.preventDefault();
+        node.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement;
+      if (event.shiftKey && (active === first || !node.contains(active))) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    node.addEventListener("keydown", onKey);
+    return () => node.removeEventListener("keydown", onKey);
+  }, [container, enabled]);
+}
+function normalize(input) {
+  return input.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim();
+}
+function scoreCountry(country, rawQuery) {
+  const q = normalize(rawQuery);
+  if (!q) return 0;
+  const code = country.code.toLowerCase();
+  const name = normalize(country.name);
+  const native = country.nativeName ? normalize(country.nativeName) : "";
+  if (code === q) return 1e3;
+  if (code.startsWith(q)) return 900;
+  if (name.startsWith(q) || native.startsWith(q)) return 700;
+  for (const lang of country.languages) {
+    if (lang.code.startsWith(q)) return 500;
+  }
+  if (name.includes(q) || native.includes(q)) return 300;
+  for (const lang of country.languages) {
+    const label = normalize(lang.label);
+    const nativeLabel = lang.nativeLabel ? normalize(lang.nativeLabel) : "";
+    if (label.includes(q) || nativeLabel.includes(q)) return 100;
+  }
+  return null;
+}
+function filterCountries(countries, query) {
+  if (!query.trim()) return countries;
+  return countries.map((c) => ({ c, s: scoreCountry(c, query) })).filter((x) => x.s !== null).sort((a, b) => b.s - a.s || a.c.name.localeCompare(b.c.name)).map((x) => x.c);
+}
+function ChevronDown(props) {
+  return (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: (0, import_jsx_runtime.jsx)("path", { d: "m4 6 4 4 4-4" })
+    }
+  );
+}
+function SearchIcon(props) {
+  return (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        (0, import_jsx_runtime.jsx)("circle", { cx: "7", cy: "7", r: "4.5" }),
+        (0, import_jsx_runtime.jsx)("path", { d: "m14 14-3.4-3.4" })
+      ]
+    }
+  );
+}
+function CheckIcon(props) {
+  return (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: (0, import_jsx_runtime.jsx)("path", { d: "m3.5 8.5 3 3 6-6" })
+    }
+  );
+}
+function ArrowLeft(props) {
+  return (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        (0, import_jsx_runtime.jsx)("path", { d: "M10 4 6 8l4 4" }),
+        (0, import_jsx_runtime.jsx)("path", { d: "M6 8h7" })
+      ]
+    }
+  );
+}
+var CountryLanguageSelector = (0, import_react.forwardRef)(function CountryLanguageSelector2(props, ref) {
+  const {
+    countries = defaultCountries,
+    value,
+    defaultValue,
+    onChange,
+    persistKey,
+    ariaLabel,
+    triggerVariant = "compact",
+    align = "end",
+    disabled,
+    className,
+    popoverClassName,
+    renderTrigger,
+    strings: stringsProp
+  } = props;
+  const strings = (0, import_react.useMemo)(
+    () => ({ ...defaultStrings, ...stringsProp ?? {} }),
+    [stringsProp]
+  );
+  const { country, language, setCountry, setLanguage } = useCountryLanguage({
+    countries,
+    value,
+    defaultValue,
+    onChange,
+    persistKey
+  });
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [step, setStep] = (0, import_react.useState)("country");
+  const [query, setQuery] = (0, import_react.useState)("");
+  const [activeIndex, setActiveIndex] = (0, import_react.useState)(0);
+  const [isMobile, setIsMobile] = (0, import_react.useState)(false);
+  const rootRef = (0, import_react.useRef)(null);
+  const popoverRef = (0, import_react.useRef)(null);
+  const triggerRef = (0, import_react.useRef)(null);
+  const searchRef = (0, import_react.useRef)(null);
+  const listboxId = (0, import_react.useId)();
+  const activeOptionId = `${listboxId}-opt-${activeIndex}`;
+  useClickOutside([rootRef, popoverRef], open, () => setOpen(false));
+  useFocusTrap(popoverRef, open);
+  (0, import_react.useEffect)(() => setIsMobile(isCoarsePointer()), []);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    setStep("country");
+    setQuery("");
+    setActiveIndex(0);
+    const t = window.setTimeout(() => {
+      var _a;
+      return (_a = searchRef.current) == null ? void 0 : _a.focus();
+    }, 10);
+    return () => window.clearTimeout(t);
+  }, [open]);
+  const filtered = (0, import_react.useMemo)(() => filterCountries(countries, query), [countries, query]);
+  (0, import_react.useEffect)(() => {
+    if (activeIndex > Math.max(0, filtered.length - 1)) setActiveIndex(0);
+  }, [filtered.length, activeIndex]);
+  const closeAndRefocus = (0, import_react.useCallback)(() => {
+    setOpen(false);
+    requestAnimationFrame(() => {
+      var _a;
+      return (_a = triggerRef.current) == null ? void 0 : _a.focus();
+    });
+  }, []);
+  const commitCountry = (0, import_react.useCallback)(
+    (c) => {
+      setCountry(c.code);
+      if (c.languages.length > 1) {
+        setStep("language");
+        setActiveIndex(0);
+      } else {
+        closeAndRefocus();
+      }
+    },
+    [setCountry, closeAndRefocus]
+  );
+  const commitLanguage = (0, import_react.useCallback)(
+    (l) => {
+      setLanguage(l.code);
+      closeAndRefocus();
+    },
+    [setLanguage, closeAndRefocus]
+  );
+  const onTriggerKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (disabled) return;
+      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " " || e.key === "ArrowUp") {
+        e.preventDefault();
+        setOpen(true);
+      }
+    },
+    [disabled]
+  );
+  const onListKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      const list = step === "country" ? filtered : country.languages;
+      if (list.length === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => (i + 1) % list.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => (i - 1 + list.length) % list.length);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActiveIndex(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setActiveIndex(list.length - 1);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const item = list[activeIndex];
+        if (!item) return;
+        if (step === "country") commitCountry(item);
+        else commitLanguage(item);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        closeAndRefocus();
+      } else if (e.key === "Backspace" && step === "language" && !query) {
+        e.preventDefault();
+        setStep("country");
+        setActiveIndex(0);
+      }
+    },
+    [step, filtered, country, activeIndex, commitCountry, commitLanguage, closeAndRefocus, query]
+  );
+  (0, import_react.useEffect)(() => {
+    const el = document.getElementById(activeOptionId);
+    if (el) el.scrollIntoView({ block: "nearest" });
+  }, [activeOptionId]);
+  return (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: (el) => {
+        rootRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      className: ["cls-root", className].filter(Boolean).join(" "),
+      children: [
+        (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            className: "cls-trigger",
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            "aria-label": ariaLabel ?? strings.ariaLabel,
+            disabled,
+            onClick: () => !disabled && setOpen((v) => !v),
+            onKeyDown: onTriggerKeyDown,
+            children: [
+              renderTrigger ? renderTrigger({ country, language, open }) : (0, import_jsx_runtime.jsx)(TriggerContent, { variant: triggerVariant, country, language }),
+              (0, import_jsx_runtime.jsx)(ChevronDown, { className: "cls-trigger__chev" })
+            ]
+          }
+        ),
+        open && isMobile && (0, import_jsx_runtime.jsx)("div", { className: "cls-backdrop", "aria-hidden": "true" }),
+        open && (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ref: popoverRef,
+            role: "dialog",
+            "aria-label": strings.ariaLabel,
+            "data-align": align,
+            tabIndex: -1,
+            className: ["cls-popover", popoverClassName].filter(Boolean).join(" "),
+            onKeyDown: onListKeyDown,
+            children: step === "country" ? (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              (0, import_jsx_runtime.jsxs)("div", { className: "cls-search", children: [
+                (0, import_jsx_runtime.jsx)(SearchIcon, { className: "cls-search__icon" }),
+                (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    ref: searchRef,
+                    type: "text",
+                    role: "combobox",
+                    "aria-expanded": "true",
+                    "aria-controls": listboxId,
+                    "aria-activedescendant": activeOptionId,
+                    "aria-autocomplete": "list",
+                    className: "cls-search__input",
+                    placeholder: strings.searchPlaceholder,
+                    value: query,
+                    onChange: (e) => {
+                      setQuery(e.target.value);
+                      setActiveIndex(0);
+                    }
+                  }
+                )
+              ] }),
+              (0, import_jsx_runtime.jsx)("div", { className: "cls-section-title", children: (0, import_jsx_runtime.jsx)("span", { children: strings.chooseCountry }) }),
+              filtered.length === 0 ? (0, import_jsx_runtime.jsx)("div", { className: "cls-empty", children: strings.emptyResults }) : (0, import_jsx_runtime.jsx)(
+                "ul",
+                {
+                  id: listboxId,
+                  role: "listbox",
+                  "aria-label": strings.chooseCountry,
+                  className: "cls-list",
+                  children: filtered.map((c, i) => {
+                    const selected = c.code === country.code;
+                    return (0, import_jsx_runtime.jsxs)(
+                      "li",
+                      {
+                        id: `${listboxId}-opt-${i}`,
+                        role: "option",
+                        "aria-selected": selected,
+                        "data-active": i === activeIndex,
+                        className: "cls-option",
+                        onMouseEnter: () => setActiveIndex(i),
+                        onClick: () => commitCountry(c),
+                        children: [
+                          (0, import_jsx_runtime.jsx)("span", { className: "cls-option__flag", "aria-hidden": "true", children: c.flag }),
+                          (0, import_jsx_runtime.jsxs)("span", { className: "cls-option__body", children: [
+                            (0, import_jsx_runtime.jsx)("span", { className: "cls-option__title", children: c.name }),
+                            c.nativeName && c.nativeName !== c.name && (0, import_jsx_runtime.jsx)("span", { className: "cls-option__subtitle", children: c.nativeName })
+                          ] }),
+                          (0, import_jsx_runtime.jsxs)("span", { className: "cls-option__meta", children: [
+                            c.languages.length > 1 ? (0, import_jsx_runtime.jsxs)("span", { className: "cls-badge", children: [
+                              c.languages.length,
+                              " langs"
+                            ] }) : (0, import_jsx_runtime.jsx)("span", { className: "cls-badge", children: c.languages[0].code.toUpperCase() }),
+                            selected && (0, import_jsx_runtime.jsx)(CheckIcon, { className: "cls-check" })
+                          ] })
+                        ]
+                      },
+                      c.code
+                    );
+                  })
+                }
+              )
+            ] }) : (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              (0, import_jsx_runtime.jsxs)("div", { className: "cls-section-title", children: [
+                (0, import_jsx_runtime.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "cls-back",
+                    onClick: () => {
+                      setStep("country");
+                      setActiveIndex(0);
+                    },
+                    children: [
+                      (0, import_jsx_runtime.jsx)(ArrowLeft, { width: 12, height: 12 }),
+                      strings.backToCountries
+                    ]
+                  }
+                ),
+                (0, import_jsx_runtime.jsxs)("span", { children: [
+                  country.flag,
+                  " ",
+                  country.name
+                ] })
+              ] }),
+              (0, import_jsx_runtime.jsx)(
+                "ul",
+                {
+                  id: listboxId,
+                  role: "listbox",
+                  "aria-label": strings.chooseLanguage,
+                  className: "cls-list",
+                  children: country.languages.map((l, i) => {
+                    const selected = l.code === language.code;
+                    return (0, import_jsx_runtime.jsxs)(
+                      "li",
+                      {
+                        id: `${listboxId}-opt-${i}`,
+                        role: "option",
+                        "aria-selected": selected,
+                        "data-active": i === activeIndex,
+                        className: "cls-option",
+                        onMouseEnter: () => setActiveIndex(i),
+                        onClick: () => commitLanguage(l),
+                        children: [
+                          (0, import_jsx_runtime.jsxs)("span", { className: "cls-option__body", children: [
+                            (0, import_jsx_runtime.jsx)("span", { className: "cls-option__title", children: l.label }),
+                            l.nativeLabel && l.nativeLabel !== l.label && (0, import_jsx_runtime.jsx)("span", { className: "cls-option__subtitle", children: l.nativeLabel })
+                          ] }),
+                          (0, import_jsx_runtime.jsxs)("span", { className: "cls-option__meta", children: [
+                            (0, import_jsx_runtime.jsx)("span", { className: "cls-badge", children: l.code.toUpperCase() }),
+                            selected && (0, import_jsx_runtime.jsx)(CheckIcon, { className: "cls-check" })
+                          ] })
+                        ]
+                      },
+                      l.code
+                    );
+                  })
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+});
+function TriggerContent({
+  variant,
+  country,
+  language
+}) {
+  if (variant === "flag") {
+    return (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      (0, import_jsx_runtime.jsx)("span", { className: "cls-trigger__flag", "aria-hidden": "true", children: country.flag }),
+      (0, import_jsx_runtime.jsx)("span", { className: "cls-trigger__lang", children: language.code })
+    ] });
+  }
+  if (variant === "full") {
+    return (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      (0, import_jsx_runtime.jsx)("span", { className: "cls-trigger__flag", "aria-hidden": "true", children: country.flag }),
+      (0, import_jsx_runtime.jsx)("span", { className: "cls-trigger__code", children: country.name }),
+      (0, import_jsx_runtime.jsx)("span", { className: "cls-trigger__sep", "aria-hidden": "true", children: "·" }),
+      (0, import_jsx_runtime.jsx)("span", { className: "cls-trigger__lang", children: language.label })
+    ] });
+  }
+  return (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    (0, import_jsx_runtime.jsx)("span", { className: "cls-trigger__flag", "aria-hidden": "true", children: country.flag }),
+    (0, import_jsx_runtime.jsx)("span", { className: "cls-trigger__code", children: country.code }),
+    (0, import_jsx_runtime.jsx)("span", { className: "cls-trigger__sep", "aria-hidden": "true", children: "·" }),
+    (0, import_jsx_runtime.jsx)("span", { className: "cls-trigger__lang", children: language.code })
+  ] });
+}
+export {
+  CountryLanguageSelector,
+  defaultCountries,
+  filterCountries,
+  languageCatalogue,
+  useCountryLanguage
+};
+//# sourceMappingURL=@asafarim_country-language-selector.js.map