@sonic-equipment/ui 0.0.119 → 1.1.0

package/dist/country-language-selection-list/connected-country-language-selection-list.js

@@ -0,0 +1,267 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useCookie } from '../cookies/use-cookie.js';
+import { useCountriesLanguages } from '../country-selector/use-countries-languages.js';
+import { CountryLanguageSelectionList } from './country-language-selection-list.js';
+
+function ConnectedCountryLanguageSelectionList() {
+    const cookieExpiryDate = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000); // 365 days
+    const [_, setCLSelectorCookie] = useCookie('CountryLanguage', {
+        expires: cookieExpiryDate,
+    });
+    const { countries } = useCountriesLanguages({});
+    const items = [];
+    const itemGroups = [
+        {
+            countries: [
+                'af',
+                'au',
+                'bd',
+                'bn',
+                'bt',
+                'cn',
+                'fj',
+                'fm',
+                'id',
+                'jp',
+                'kh',
+                'ki',
+                'kp',
+                'kr',
+                'la',
+                'lk',
+                'mh',
+                'mm',
+                'mn',
+                'mv',
+                'my',
+                'np',
+                'nr',
+                'nz',
+                'pg',
+                'ph',
+                'pk',
+                'pw',
+                'sb',
+                'sg',
+                'th',
+                'tl',
+                'to',
+                'tv',
+                'tw',
+                'vn',
+                'vu',
+                'ws',
+            ],
+            key: 'asia_pacific',
+        },
+        {
+            countries: [
+                'ad',
+                'at',
+                'be',
+                'cy',
+                'dk',
+                'ee',
+                'fi',
+                'fr',
+                'de',
+                'gr',
+                'is',
+                'ie',
+                'it',
+                'li',
+                'lu',
+                'mt',
+                'mc',
+                'nl',
+                'no',
+                'pt',
+                'sm',
+                'rs',
+                'es',
+                'se',
+                'ch',
+                'gb',
+                'va',
+            ],
+            key: 'central_western_europe',
+        },
+        {
+            countries: [
+                'al',
+                'am',
+                'az',
+                'ba',
+                'bg',
+                'by',
+                'cz',
+                'ge',
+                'hr',
+                'hu',
+                'lt',
+                'lv',
+                'md',
+                'me',
+                'mk',
+                'pl',
+                'ro',
+                'ru',
+                'si',
+                'sk',
+                'ua',
+                'kz',
+                'kg',
+                'tj',
+                'tm',
+                'uz',
+            ],
+            key: 'eastern_europe_central_asia',
+        },
+        {
+            countries: [
+                'ag',
+                'ar',
+                'bs',
+                'bb',
+                'bz',
+                'bo',
+                'br',
+                'cl',
+                'co',
+                'cr',
+                'cu',
+                'dm',
+                'do',
+                'ec',
+                'sv',
+                'gd',
+                'gt',
+                'gy',
+                'ht',
+                'hn',
+                'jm',
+                'kn',
+                'lc',
+                'mx',
+                'ni',
+                'pa',
+                'py',
+                'pe',
+                'sr',
+                'tt',
+                'uy',
+                've',
+                'vc',
+            ],
+            key: 'south_america',
+        },
+        {
+            countries: [
+                'kz',
+                'kg',
+                'tj',
+                'tm',
+                'uz',
+                'ae',
+                'bh',
+                'il',
+                'in',
+                'iq',
+                'ir',
+                'jo',
+                'kw',
+                'lb',
+                'om',
+                'qa',
+                'sa',
+                'sy',
+                'tr',
+                'ye',
+                'dz',
+                'ao',
+                'bj',
+                'bw',
+                'bf',
+                'bi',
+                'cv',
+                'cm',
+                'cf',
+                'td',
+                'km',
+                'cg',
+                'cd',
+                'ci',
+                'dj',
+                'eg',
+                'gq',
+                'er',
+                'sz',
+                'et',
+                'ga',
+                'gm',
+                'gh',
+                'gn',
+                'gw',
+                'ke',
+                'ls',
+                'lr',
+                'ly',
+                'mg',
+                'mw',
+                'ml',
+                'mr',
+                'mu',
+                'ma',
+                'mz',
+                'na',
+                'ne',
+                'ng',
+                'rw',
+                'st',
+                'sn',
+                'sc',
+                'sl',
+                'ps',
+                'so',
+                'za',
+                'ss',
+                'sd',
+                'tz',
+                'tg',
+                'tn',
+                'ug',
+                'zm',
+                'zw',
+            ],
+            key: 'africa_middle_east_india',
+        },
+        {
+            countries: ['us', 'ca', 'pr'],
+            key: 'north_america',
+        },
+    ];
+    countries?.forEach(country => {
+        const countryCode = country.abbreviation.toLowerCase();
+        const languageCodes = country.languages.map(({ languageCode }) => languageCode.toLowerCase());
+        languageCodes.forEach(languageCode => {
+            const itemKey = `${languageCode}-${countryCode}`;
+            items.push({
+                country: countryCode,
+                key: itemKey,
+                language: languageCode,
+                path: `/${languageCode}-${countryCode}`,
+            });
+        });
+    });
+    const handleSelect = (selectedItem) => {
+        const item = items.find(item => item.key === selectedItem);
+        if (!item)
+            return;
+        const { country, language } = item;
+        setCLSelectorCookie(`closed=true;language=${language};country=${country}`);
+    };
+    return (jsx(CountryLanguageSelectionList, { itemGroups: itemGroups, items: items, onSelect: handleSelect }));
+}
+
+export { ConnectedCountryLanguageSelectionList };

package/dist/country-language-selection-list/country-language-selection-list.d.ts

@@ -0,0 +1,18 @@
+import { CountryCode, CountryLanguageCode, LanguageCode } from '../intl/types';
+export interface CountryLanguageSelectionItem {
+    country: Lowercase<CountryCode>;
+    key: CountryLanguageCode;
+    language: Lowercase<LanguageCode>;
+    path: string;
+}
+export interface CountryLanguageSelectionItemGroup {
+    countries: Array<Lowercase<CountryCode>>;
+    key: string;
+}
+interface CountryLanguageSelectionListProps {
+    itemGroups?: CountryLanguageSelectionItemGroup[];
+    items: CountryLanguageSelectionItem[];
+    onSelect?: (key: CountryLanguageCode) => void;
+}
+export declare function CountryLanguageSelectionList({ itemGroups, items, onSelect, }: CountryLanguageSelectionListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/country-language-selection-list/country-language-selection-list.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Link } from '../buttons/link/link.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { Heading } from '../typography/heading/heading.js';
+import styles from './country-language-selection-list.module.css.js';
+
+function CountryLanguageSelectionSublist({ handleClick, items, }) {
+    const t = useFormattedMessage();
+    return (jsx("ul", { className: styles.list, children: items.map(({ country, key, language, path }) => {
+            const label = t(`clselector.country.${country}.${language}`);
+            return (jsx("li", { children: jsx(Link, { ignoreLocalePrefix: true, color: "secondary", "data-country": country, "data-language": language, "data-test-selector": "clselector-option", href: path, hrefLang: language, onClick: () => handleClick(key), children: jsx("span", { lang: language, children: label }) }) }, key));
+        }) }));
+}
+function CountryLanguageSelectionList({ itemGroups, items, onSelect, }) {
+    const t = useFormattedMessage();
+    const handleClick = (key) => {
+        onSelect?.(key);
+    };
+    const getItemsByCountry = (country) => {
+        return (items
+            .filter(item => item.country === country)
+            // sort by their translated label
+            .sort((a, b) => {
+            const labelA = t(`clselector.country.${country}.${a.language}`);
+            const labelB = t(`clselector.country.${country}.${b.language}`);
+            return labelA.localeCompare(labelB);
+        }));
+    };
+    // filter group to only those with items, based on items prop
+    const filteredGroups = itemGroups
+        ?.map(({ countries, key }) => {
+        return {
+            items: countries
+                // sort countries alphabetically by translated label of first item in set
+                .sort((a, b) => {
+                const labelA = t(`clselector.country.${a}.${getItemsByCountry(a)[0]?.language}`);
+                const labelB = t(`clselector.country.${b}.${getItemsByCountry(b)[0]?.language}`);
+                return labelA.localeCompare(labelB);
+            })
+                .flatMap(country => getItemsByCountry(country)),
+            key,
+            label: t(`clselector.continent.${key}`),
+        };
+    })
+        // sort groups alphabetically by group label
+        .sort((a, b) => {
+        return a.label.localeCompare(b.label);
+    });
+    return (jsx("section", { className: styles['country-language-selection-list'], children: itemGroups && filteredGroups ? (filteredGroups.map(({ items, key, label }) => {
+            return items.length > 0 ? (jsxs("section", { className: styles['group'], children: [jsx(Heading, { className: styles['heading'], size: "xs", tag: "h2", children: label }), jsx(CountryLanguageSelectionSublist, { handleClick: handleClick, items: items })] }, key)) : null;
+        })) : (jsx(CountryLanguageSelectionSublist, { handleClick: handleClick, items: items })) }));
+}
+
+export { CountryLanguageSelectionList };

package/dist/country-language-selection-list/country-language-selection-list.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"country-language-selection-list":"country-language-selection-list-module-TIz6H","list":"country-language-selection-list-module-MYQLz","group":"country-language-selection-list-module-xqJhq","heading":"country-language-selection-list-module-jXkw-"};
+
+export { styles as default };

package/dist/country-language-selector/connected-country-language-selector.d.ts

@@ -0,0 +1,11 @@
+import { CountryCode, LanguageCode } from '../intl/types';
+export interface ConnectedCountryLanguageSelectorProps {
+    className?: string;
+    countries?: CountryCode[];
+    currentPath?: string;
+    isOpen?: boolean;
+    selectedCountry?: CountryCode;
+    selectedLanguage?: LanguageCode;
+    sticky?: boolean;
+}
+export declare function ConnectedCountryLanguageSelector({ className, countries: _countries, isOpen: _isOpen, selectedCountry, selectedLanguage, sticky, }: ConnectedCountryLanguageSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/country-language-selector/connected-country-language-selector.js

@@ -0,0 +1,155 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useCookie } from '../cookies/use-cookie.js';
+import { useCountriesLanguages } from '../country-selector/use-countries-languages.js';
+import { isCountryLanguageCode } from '../intl/types.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { useIntl } from '../intl/use-intl.js';
+import { useNavigate } from '../shared/routing/use-navigate.js';
+import { useRouter } from '../shared/routing/use-router.js';
+import { environment } from '../shared/utils/environment.js';
+import { CountryLanguageSelector } from './country-language-selector.js';
+
+/* eslint-disable @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
+// eslint-disable-next-line no-warning-comments
+/* TODO:
+  - defaultSelected based on current Country and Language (from URL path, determined by intlProvider)
+  - suggested value is best option from an offered list of options
+    - based on geoIP (region) and browser language preferences
+    - browser language preferences can be multiple and are listed in priority
+  - redirect to /xx-yy homepage? or map the current path to the new locale (...)?
+*/
+const pathToCLSelectionList = '/countries';
+function ConnectedCountryLanguageSelector({ className, countries: _countries, isOpen: _isOpen, selectedCountry, selectedLanguage, sticky, }) {
+    const t = useFormattedMessage();
+    const { navigate } = useNavigate();
+    const { setShowSelector, showSelector } = useIntl();
+    const cookieExpiryDate = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000); // 365 days
+    const [CLSelectorCookie, setCLSelectorCookie] = useCookie('countryLanguageSelector', {
+        expires: cookieExpiryDate,
+    });
+    const [isOpen, setIsOpen] = useState(_isOpen ?? !CLSelectorCookie?.includes('closed=true'));
+    const { countries } = useCountriesLanguages({});
+    const router = useRouter();
+    const { alternativeHrefs, pathname } = router.url;
+    const { defaultSelectedOption, menuOptionGroups, menuOptions, optionData } = useMemo(() => {
+        const menuOptions = {
+            other: t('Choose your country or region…'),
+        };
+        const menuOptionGroups = [];
+        const optionData = [];
+        countries?.forEach(country => {
+            const options = [];
+            const countryCode = country.abbreviation.toLowerCase();
+            if (_countries && !_countries.includes(country.abbreviation)) {
+                return;
+            }
+            const languageCodes = country.languages
+                .map(({ languageCode }) => languageCode.toLowerCase())
+                .sort();
+            const groupLabel = t(`clselector.country.${countryCode}.${languageCodes[0]}`);
+            const groupReactNode = languageCodes.flatMap((languageCode, index) => {
+                const translation = t(`clselector.country.${countryCode}.${languageCode}`);
+                return index === 0
+                    ? [
+                        jsx("span", { lang: languageCode, children: translation }, languageCode),
+                    ]
+                    : [
+                        '/',
+                        jsx("span", { lang: languageCode, children: translation }, languageCode),
+                    ];
+            });
+            languageCodes.forEach(languageCode => {
+                const optionKey = `${languageCode}-${countryCode}`;
+                const optionCountryLabel = `clselector.country.${countryCode}.${languageCode}`;
+                const optionLanguageLabel = `clselector.language.${languageCode}.${languageCode}`;
+                options.push(optionKey);
+                let path;
+                if (alternativeHrefs && alternativeHrefs[optionKey]) {
+                    path = `/${optionKey}${alternativeHrefs[optionKey]}`;
+                }
+                else if (!alternativeHrefs ||
+                    Object.keys(alternativeHrefs).length === 0) {
+                    const currentCountryLanguage = pathname.split('/')[1]?.toLowerCase();
+                    path = isCountryLanguageCode(currentCountryLanguage)
+                        ? pathname
+                            .toLowerCase()
+                            .replace(`${currentCountryLanguage}`, `${optionKey}`)
+                        : `/${optionKey}${pathname}`;
+                }
+                else {
+                    path = `/${optionKey}`;
+                }
+                menuOptions[optionKey] =
+                    environment === 'next-production' ||
+                        environment === 'production' ? (jsx("span", { lang: languageCode, children: `${t(optionCountryLabel)} - ${t(optionLanguageLabel)}` })) : (jsxs("span", { lang: languageCode, children: [`${t(optionCountryLabel)} - ${t(optionLanguageLabel)}`, jsx("code", { style: { fontSize: '12px' }, children: path })] }));
+                optionData.push({
+                    country: countryCode,
+                    key: optionKey,
+                    language: languageCode,
+                    path,
+                });
+            });
+            menuOptionGroups.push({
+                key: countryCode,
+                label: groupLabel,
+                options,
+                reactNode: groupReactNode,
+            });
+        });
+        menuOptionGroups.sort((a, b) => a.label.localeCompare(b.label));
+        const defaultSelectedLanguageCountry = selectedLanguage && selectedCountry
+            ? `${selectedLanguage.toLowerCase()}-${selectedCountry.toLowerCase()}`
+            : undefined;
+        const defaultSelectedOption = defaultSelectedLanguageCountry &&
+            Object.keys(menuOptions).includes(defaultSelectedLanguageCountry)
+            ? defaultSelectedLanguageCountry
+            : undefined;
+        return {
+            defaultSelectedOption,
+            menuOptionGroups,
+            menuOptions,
+            optionData,
+        };
+    }, [
+        _countries,
+        alternativeHrefs,
+        countries,
+        pathname,
+        selectedCountry,
+        selectedLanguage,
+        t,
+    ]);
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+        setCLSelectorCookie('closed=true');
+    }, [setCLSelectorCookie]);
+    const handleSubmit = useCallback((selectedOption) => {
+        setIsOpen(false);
+        if (selectedOption === 'other') {
+            setCLSelectorCookie('closed=true');
+            navigate(pathToCLSelectionList, {
+                ignoreLocalePrefix: true,
+            });
+        }
+        else {
+            const option = optionData.find(option => option.key === selectedOption);
+            if (!option)
+                return;
+            const { country, language, path } = option;
+            setCLSelectorCookie(`closed=true;language=${language};country=${country}`);
+            navigate(path, { ignoreLocalePrefix: true, reload: true });
+        }
+    }, [navigate, optionData, setCLSelectorCookie]);
+    // react to CountryLanguageSelectorButton clicked
+    useEffect(() => {
+        if (showSelector) {
+            setShowSelector(false);
+            setIsOpen(true);
+        }
+    }, [showSelector, setShowSelector]);
+    return (jsx(CountryLanguageSelector, { className: className, defaultSelectedOption: defaultSelectedOption, isOpen: isOpen, onClose: handleClose, onSubmit: handleSubmit, optionGroups: menuOptionGroups, options: menuOptions, sticky: sticky }));
+}
+
+export { ConnectedCountryLanguageSelector };

package/dist/country-language-selector/country-language-selector.d.ts

@@ -0,0 +1,18 @@
+import { SelectFieldOptionGroup } from '../forms/fields/select-field/select-field';
+import { CountryLanguageCode } from '../intl/types';
+export type CountryLanguageSelectorOptions = {
+    [K in CountryLanguageCode]: string | React.ReactNode;
+} & {
+    other?: string | React.ReactNode;
+};
+export interface CountryLanguageSelectorProps {
+    className?: string;
+    defaultSelectedOption?: CountryLanguageCode | 'other';
+    isOpen?: boolean;
+    onClose?: () => void;
+    onSubmit: (selectedOption: CountryLanguageCode | 'other') => void;
+    optionGroups?: SelectFieldOptionGroup<CountryLanguageCode>[];
+    options: CountryLanguageSelectorOptions;
+    sticky?: boolean;
+}
+export declare function CountryLanguageSelector({ className, defaultSelectedOption, isOpen, onClose, onSubmit, optionGroups, options, sticky, }: CountryLanguageSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/country-language-selector/country-language-selector.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { clsx } from 'clsx';
+import { Button } from '../buttons/button/button.js';
+import { CloseButton } from '../buttons/close-button/close-button.js';
+import { SelectField } from '../forms/fields/select-field/select-field.js';
+import { Form } from '../forms/layout/form/form.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { useResizeObserver } from '../shared/hooks/use-resize-observer.js';
+import styles from './country-language-selector.module.css.js';
+
+function CountryLanguageSelector({ className, defaultSelectedOption, isOpen, onClose, onSubmit, optionGroups, options, sticky = true, }) {
+    const t = useFormattedMessage();
+    const title = t('Select a region and language');
+    const [selectedKey, setSelectedKey] = useState(defaultSelectedOption);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const { ref: clSelectorRef } = useResizeObserver((_, size) => {
+        const height = size.height;
+        document?.documentElement.style.setProperty('--clselector-height', `${height}px`);
+    });
+    const focusTimeoutRef = useRef(undefined);
+    useEffect(() => {
+        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+        setIsInitialized(true);
+    }, []);
+    const handleSubmit = () => {
+        if (selectedKey)
+            onSubmit(selectedKey);
+    };
+    useEffect(() => {
+        if (isOpen) {
+            const el = document?.getElementById('country-language-selector');
+            el?.scrollIntoView();
+            focusTimeoutRef.current = window?.setTimeout(() => {
+                el?.focus();
+            }, 100);
+        }
+        return () => {
+            if (focusTimeoutRef.current) {
+                clearTimeout(focusTimeoutRef.current);
+            }
+        };
+    }, [clSelectorRef, isOpen]);
+    return (jsx("header", { ref: clSelectorRef, "aria-label": title, className: clsx(styles['country-language-selector'], isInitialized && styles['is-initialized'], isOpen && styles['is-open'], sticky && styles['sticky'], className), "data-test-selector": "country-language-selector", id: "country-language-selector", 
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: 0, children: jsxs("div", { className: styles['body'], children: [jsx("p", { className: styles['explanation'], children: t('Choose another region if you want to see the content for your location and shop online.') }), jsxs(Form, { className: styles['form'], onSubmit: handleSubmit, children: [jsx(SelectField, { className: styles['menu'], "data-test-selector": "country-language-selector-menu", defaultSelectedOption: defaultSelectedOption === 'other'
+                                ? undefined
+                                : defaultSelectedOption, label: title, name: "cl", onChange: key => setSelectedKey(key), optionGroups: optionGroups, options: options, placeholder: title, showLabel: false, variant: "solid" }), jsx(Button, { light: true, className: styles['submit'], "data-test-selector": "country-language-selector-submit", isDisabled: !selectedKey, size: "sm", type: "submit", variant: "solid", children: t('Continue') })] }), jsx(CloseButton, { className: styles['close'], "data-test-selector": "country-language-selector-close", label: t('Close and don’t show again'), onClick: onClose, size: "sm" })] }) }));
+}
+
+export { CountryLanguageSelector };

package/dist/country-language-selector/country-language-selector.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"country-language-selector":"country-language-selector-module-lW6eg","sticky":"country-language-selector-module-fsfbv","is-open":"country-language-selector-module-XttBY","is-initialized":"country-language-selector-module-lfI2j","body":"country-language-selector-module-4qE7H","explanation":"country-language-selector-module-UvT-P","form":"country-language-selector-module-pZ3tL","close":"country-language-selector-module-sJF5B"};
+
+export { styles as default };

package/dist/country-language-selector-button/connected-country-language-selector-button.d.ts

@@ -0,0 +1 @@
+export declare function ConnectedCountryLanguageSelectorButton(): import("react/jsx-runtime").JSX.Element;

package/dist/country-language-selector-button/connected-country-language-selector-button.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useCountriesLanguages } from '../country-selector/use-countries-languages.js';
+import { useIntl } from '../intl/use-intl.js';
+import { useFetchSession } from '../shared/api/storefront/hooks/authentication/use-fetch-session.js';
+import { CountryLanguageSelectorButton } from './country-language-selector-button.js';
+
+function ConnectedCountryLanguageSelectorButton() {
+    const { setShowSelector } = useIntl();
+    const { data: sessionData } = useFetchSession();
+    const { defaultCountry, defaultLanguage, selectedCountry, selectedLanguage } = useCountriesLanguages({
+        billToCountryId: sessionData?.billTo?.country?.id,
+    });
+    const onClick = () => {
+        setShowSelector(true);
+    };
+    const countryCode = selectedCountry?.abbreviation ?? defaultCountry?.abbreviation;
+    const languageCode = selectedLanguage?.languageCode ?? defaultLanguage?.languageCode;
+    return (jsx(CountryLanguageSelectorButton, { countryCode: countryCode, languageCode: languageCode, onClick: onClick }));
+}
+
+export { ConnectedCountryLanguageSelectorButton };

package/dist/country-language-selector-button/country-language-selector-button.d.ts

@@ -0,0 +1,7 @@
+import { CountryCode, LanguageCode } from '../intl/types';
+export interface CountryLanguageSelectorButtonProps {
+    countryCode?: CountryCode;
+    languageCode?: LanguageCode;
+    onClick?: () => void;
+}
+export declare function CountryLanguageSelectorButton({ countryCode, languageCode, onClick, }: CountryLanguageSelectorButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/country-language-selector-button/country-language-selector-button.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Link } from '../buttons/link/link.js';
+import { Flag } from '../flag/flag.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import styles from './country-language-selector-button.module.css.js';
+
+function CountryLanguageSelectorButton({ countryCode, languageCode, onClick, }) {
+    const t = useFormattedMessage();
+    const title = t('Select another country or language…');
+    if (!countryCode || !languageCode)
+        return jsx("span", { className: styles['country-language-selector-button'] });
+    const countryLabel = t(`clselector.country.${countryCode.toLowerCase()}.${languageCode.toLowerCase()}`);
+    const languageLabel = t(`clselector.language.${languageCode.toLowerCase()}.${languageCode.toLowerCase()}`);
+    return (jsxs(Link, { "aria-label": title, className: styles['country-language-selector-button'], "data-test-selector": "country-language-selector-button", onClick: onClick, title: title, children: [jsx(Flag, { className: styles.flag, country: countryCode, label: "" }), jsxs("div", { className: styles['label'], children: [jsx("data", { className: styles['country'], children: countryLabel }), jsx("data", { className: styles['language'], children: languageLabel })] })] }));
+}
+
+export { CountryLanguageSelectorButton };

package/dist/country-language-selector-button/country-language-selector-button.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"country-language-selector-button":"country-language-selector-button-module-SN6I2","label":"country-language-selector-button-module-gV7Cp","country":"country-language-selector-button-module-1Cz2x","language":"country-language-selector-button-module-Ix4GQ"};
+
+export { styles as default };