@sonic-equipment/ui 0.0.119 → 120.0.0

package/dist/algolia/algolia-results-count.js

@@ -0,0 +1,14 @@
+"use client";
+import { useHits } from 'react-instantsearch';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+
+function AlgoliaResultsCount() {
+    const { results } = useHits();
+    const t = useFormattedMessage();
+    if (!results)
+        return null;
+    const count = results.nbHits;
+    return `${count} ${count === 1 ? t('article') : t('articles')}`;
+}
+
+export { AlgoliaResultsCount };

package/dist/algolia/algolia-search-provider.js

@@ -0,0 +1,139 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useMemo, useRef, useEffect } from 'react';
+import { createAutocomplete } from '@algolia/autocomplete-core';
+import { getAlgoliaResults } from '@algolia/autocomplete-preset-algolia';
+import { config } from '../config.js';
+import { categoriesPlugin } from '../global-search/plugins/categories-plugin.js';
+import { popularCategoriesPlugin } from '../global-search/plugins/popular-categories-plugin.js';
+import { popularSearchesPlugin } from '../global-search/plugins/popular-searches-plugin.js';
+import { querySuggestionsPlugin } from '../global-search/plugins/query-suggestions-plugin.js';
+import { quickAccessPlugin } from '../global-search/plugins/quick-access-plugin.js';
+import { recentSearchesPlugin } from '../global-search/plugins/recent-searches-plugin.js';
+import { useLanguageCode } from '../intl/use-language-code.js';
+import { useDebouncedCallback } from '../shared/hooks/use-debounced-callback.js';
+import { environment } from '../shared/utils/environment.js';
+import { getAlgoliaIndex } from './algolia-index-config.js';
+import { AlgoliaInsightsProvider } from './algolia-insights-provider.js';
+import { createSonicSearchClient } from './algolia-sonic-searchclient.js';
+
+const GlobalSearchContext = createContext(null);
+function AlgoliaSearchProvider({ children, searchClient: _searchClient, }) {
+    const [state, setState] = useState({
+        activeItemId: null,
+        collections: [],
+        completion: null,
+        context: {},
+        isOpen: false,
+        query: '',
+        status: 'idle',
+    });
+    const searchClient = useMemo(() => _searchClient ||
+        createSonicSearchClient({
+            apiKey: config.ALGOLIA_API_KEY,
+            appId: config.ALGOLIA_APP_ID,
+            host: config.ALGOLIA_HOST,
+        }), [_searchClient]);
+    const languageCode = useLanguageCode();
+    const index = getAlgoliaIndex(environment, languageCode);
+    const productsIndexName = index.default;
+    const productsQuerySuggestionsIndexName = index.suggestions;
+    const getSources = useDebouncedCallback(({ query }) => {
+        return [
+            {
+                getItems() {
+                    return getAlgoliaResults({
+                        queries: [
+                            {
+                                indexName: productsIndexName,
+                                params: {
+                                    hitsPerPage: 5,
+                                },
+                                query,
+                            },
+                        ],
+                        searchClient,
+                    });
+                },
+                sourceId: 'productsPlugin',
+            },
+        ];
+    }, 300);
+    /**
+     * https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/#mirror-a-native-mobile-experience
+     */
+    const autocomplete = useMemo(() => createAutocomplete({
+        autoFocus: true,
+        getSources,
+        insights: true,
+        onStateChange({ state }) {
+            setState(state);
+        },
+        openOnFocus: true,
+        plugins: [
+            querySuggestionsPlugin({
+                searchClient,
+                suggestionsIndexName: productsQuerySuggestionsIndexName,
+            }),
+            popularCategoriesPlugin({
+                productsIndexName,
+                searchClient,
+            }),
+            quickAccessPlugin({
+                productsIndexName,
+                searchClient,
+            }),
+            categoriesPlugin({
+                productsIndexName,
+                searchClient,
+            }),
+            popularSearchesPlugin({
+                searchClient,
+                suggestionsIndexName: productsQuerySuggestionsIndexName,
+            }),
+            recentSearchesPlugin,
+        ],
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [productsIndexName, productsQuerySuggestionsIndexName, searchClient]);
+    /**
+     * https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/#mirror-a-native-mobile-experience
+     */
+    const inputRef = useRef(null);
+    const formRef = useRef(null);
+    const panelRef = useRef(null);
+    const { getEnvironmentProps } = autocomplete;
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        if (!formRef.current || !panelRef.current || !inputRef.current) {
+            return;
+        }
+        const { onMouseDown, onTouchMove, onTouchStart } = getEnvironmentProps({
+            formElement: formRef.current,
+            inputElement: inputRef.current,
+            panelElement: panelRef.current,
+        });
+        window.addEventListener('mousedown', onMouseDown);
+        window.addEventListener('touchstart', onTouchStart);
+        window.addEventListener('touchmove', onTouchMove);
+        return () => {
+            window?.removeEventListener('mousedown', onMouseDown);
+            window?.removeEventListener('touchstart', onTouchStart);
+            window?.removeEventListener('touchmove', onTouchMove);
+        };
+    }, [getEnvironmentProps, state.isOpen]);
+    return (jsx(AlgoliaInsightsProvider, { value: { index: productsIndexName }, children: jsx(GlobalSearchContext.Provider, { value: {
+                autocomplete,
+                formRef,
+                inputRef,
+                panelRef,
+                productsIndexName,
+                productsQuerySuggestionsIndexName,
+                searchClient,
+                setState,
+                state,
+            }, children: typeof children === 'function' ? children(autocomplete) : children }) }));
+}
+
+export { AlgoliaSearchProvider, GlobalSearchContext };

package/dist/algolia/algolia-searchclient-offline.js

@@ -0,0 +1,25 @@
+"use client";
+const searchClientLogger = (searchClient) => {
+    return {
+        ...searchClient,
+        search: (async (queries, requestOptions) => {
+            const response = await searchClient.search(queries, requestOptions);
+            // eslint-disable-next-line no-console
+            console.log('Algolia::SearchClient::search', {
+                args: { queries, requestOptions },
+                response,
+            });
+            return response;
+        }),
+    };
+};
+const offlineSearchClient = {
+    search(_queries, _requestOptions) {
+        return fetch('data/algolia.json').then(response => response.json());
+    },
+    async searchForFacetValues(_queries, _requestOptions) {
+        return [];
+    },
+};
+
+export { offlineSearchClient, searchClientLogger };

package/dist/algolia/algolia-sonic-searchclient.js

@@ -0,0 +1,25 @@
+"use client";
+import algoliasearch from 'algoliasearch';
+
+const createSonicSearchClient = ({ apiKey, appId, host, }) => {
+    const searchClient = algoliasearch(appId, apiKey);
+    if (!host) {
+        return searchClient;
+    }
+    const read = searchClient.transporter.read;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    searchClient.transporter.hosts = [{ accept: 1, protocol: 'https', url: host }];
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    searchClient.transporter.timeouts = { connect: 3000, read: 3000, write: 3000 };
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    searchClient.transporter.read = (request) => {
+        request.path = `/api/v1/bff/${request.path.replace('*', 'x')}`;
+        return read(request);
+    };
+    return searchClient;
+};
+
+export { createSonicSearchClient };

package/dist/algolia/algolia-sort-by.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useSortBy } from 'react-instantsearch';
+import { Select } from '../forms/select/select.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { useLanguageCode } from '../intl/use-language-code.js';
+import { environment } from '../shared/utils/environment.js';
+import { getAlgoliaIndex } from './algolia-index-config.js';
+
+function AlgoliaSortBy() {
+    const languageCode = useLanguageCode();
+    const algoliaIndex = getAlgoliaIndex(environment, languageCode);
+    const t = useFormattedMessage();
+    const { currentRefinement, options: algoliaOptions, refine, } = useSortBy({
+        items: algoliaIndex.sort.map(({ index, name }) => ({
+            label: t(`sort.${name}`),
+            value: index,
+        })),
+    });
+    if (algoliaOptions.length === 0)
+        return null;
+    const options = algoliaOptions.reduce((acc, option) => {
+        acc[option.value] = option.label;
+        return acc;
+    }, {});
+    return (jsx(Select, { label: t('Sort by'), onChange: value => refine(String(value)), options: options, selectedOption: currentRefinement, showLabel: false, size: "sm" }));
+}
+
+export { AlgoliaSortBy };

package/dist/algolia/filter-section.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Accordion } from '../collapsables/accordion/accordion.js';
+import { AccordionItem } from '../collapsables/accordion/accordion-item.js';
+import { FormattedMessage } from '../intl/formatted-message.js';
+import filterSectionStyles from './filter-section.module.css.js';
+
+function FilterSection({ ...props }) {
+    const variant = props.variant;
+    /* eslint-disable @typescript-eslint/no-unnecessary-condition */
+    if (props.variant === 'collapsible') {
+        return jsx(CollapsibleFilterSection, { ...props });
+    }
+    if (props.variant === 'default') {
+        return jsx(DefaultFilterSection, { ...props });
+    }
+    if (props.variant === 'with-action') {
+        return jsx(WithActionFilterSection, { ...props });
+    }
+    throw new Error(`Invalid variant ${variant}`);
+    /* eslint-enable @typescript-eslint/no-unnecessary-condition */
+}
+function CollapsibleFilterSection({ children, gap = 'md', initialIsOpen = true, title, variant, }) {
+    return (jsx("section", { className: clsx(filterSectionStyles['filter-section'], filterSectionStyles[variant], filterSectionStyles[gap]), children: jsx(Accordion, { borderType: "middle", children: jsx(AccordionItem, { id: title, initialIsOpen: initialIsOpen, title: jsx("span", { className: filterSectionStyles['accordion-title'], children: jsx(FormattedMessage, { optional: true, fallbackValue: title, id: `facet.${title.toLowerCase()}` }) }), children: jsx("div", { className: filterSectionStyles.content, children: children }) }) }) }));
+}
+function WithActionFilterSection({ button, children, gap = 'md', title, variant, }) {
+    return (jsxs("section", { className: clsx(filterSectionStyles['filter-section'], filterSectionStyles[variant], filterSectionStyles[gap]), children: [jsxs("div", { className: filterSectionStyles.header, children: [jsx("h3", { className: filterSectionStyles.title, children: title }), jsx("div", { children: button })] }), jsx("div", { className: filterSectionStyles.content, children: children })] }));
+}
+function DefaultFilterSection({ children, gap = 'md', title, variant, }) {
+    return (jsxs("section", { className: clsx(filterSectionStyles['filter-section'], filterSectionStyles[variant], filterSectionStyles[gap]), children: [jsx("h3", { className: filterSectionStyles.title, children: title }), jsx("div", { className: filterSectionStyles.content, children: children })] }));
+}
+
+export { FilterSection };

package/dist/algolia/filter-section.module.css.js

@@ -0,0 +1,3 @@
+var filterSectionStyles = {"filter-section":"filter-section-module-q1Ob8","default":"filter-section-module-JkP09","title":"filter-section-module-hWVv-","with-action":"filter-section-module-9qc6L","header":"filter-section-module-zi2ZE","content":"filter-section-module-15-YW","border-top":"filter-section-module-dGcTY","filter-section-item":"filter-section-module-n-AWg"};
+
+export { filterSectionStyles as default };

package/dist/algolia/use-algolia-hits.js

@@ -0,0 +1,19 @@
+"use client";
+import { transformAlgoliaProductHitToProductHit, transformAlgoliaPromoHitToPromoHit } from '../shared/model/hit.js';
+import { useGlobalState } from '../shared/providers/global-state-provider.js';
+import { isAlgoliaProductHit } from './algolia-hit-type.js';
+
+const useAlgoliaHitsItems = () => useGlobalState('algolia-product-hits-items', []);
+const useAlgoliaHitsLoading = () => useGlobalState('algolia-product-hits-loading');
+function useAlgoliaHits() {
+    const [items] = useAlgoliaHitsItems();
+    const [isLoading] = useAlgoliaHitsLoading();
+    return {
+        hits: items.map(hit => isAlgoliaProductHit(hit)
+            ? transformAlgoliaProductHitToProductHit(hit)
+            : transformAlgoliaPromoHitToPromoHit(hit)),
+        isLoading,
+    };
+}
+
+export { useAlgoliaHits, useAlgoliaHitsItems, useAlgoliaHitsLoading };

package/dist/algolia/use-algolia-insights-provider-global-state.js

@@ -0,0 +1,9 @@
+"use client";
+import { useGlobalState } from '../shared/providers/global-state-provider.js';
+
+function useAlgoliaInsightsGlobalState() {
+    const [state, setState] = useGlobalState('algolia-insights-global-state', {});
+    return [state, setState];
+}
+
+export { useAlgoliaInsightsGlobalState };

package/dist/algolia/use-algolia-insights.js

@@ -0,0 +1,181 @@
+"use client";
+import { useContext } from 'react';
+import aa from 'search-insights';
+import { currencySymbolToISO } from '../shared/model/currency.js';
+import { ensureArray } from '../shared/utils/array.js';
+import { AlgoliaInsightsProviderContext } from './algolia-insights-provider.js';
+import { userToken } from './algolia-intialization.js';
+import { useAlgoliaInsightsGlobalState } from './use-algolia-insights-provider-global-state.js';
+
+function getCurrencyFromPriceString(priceString) {
+    const currencySymbol = priceString?.replace(/[\d ,.-]/g, '');
+    return currencySymbol ? currencySymbolToISO[currencySymbol] : undefined;
+}
+function useAlgoliaInsights() {
+    const context = useContext(AlgoliaInsightsProviderContext);
+    const [, setGlobalState] = useAlgoliaInsightsGlobalState();
+    return {
+        context,
+        sendAddToCartFromProductListPageEvent({ cartLine, objectId }) {
+            if (!context.index)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            if (!context.queryId)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+            aa('addedToCartObjectIDsAfterSearch', {
+                currency: getCurrencyFromPriceString(cartLine.pricing?.actualPriceDisplay),
+                eventName: 'PLP: AddToCart ClickedAfterSearch',
+                index: context.index,
+                objectData: [
+                    {
+                        price: cartLine.pricing?.actualPrice || undefined,
+                        quantity: cartLine.qtyOrdered || undefined,
+                        queryID: context.queryId,
+                    },
+                ],
+                objectIDs: [objectId],
+                queryID: context.queryId,
+                userToken,
+            });
+        },
+        sendAddToCartFromSearchEvent({ cartLine, objectId, queryId }) {
+            if (!context.index)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            aa('addedToCartObjectIDsAfterSearch', {
+                currency: getCurrencyFromPriceString(cartLine.pricing?.actualPriceDisplay),
+                eventName: 'SRP: AddToCart ClickedAfterSearch',
+                index: context.index,
+                objectData: [
+                    {
+                        price: cartLine.pricing?.actualPrice || undefined,
+                        quantity: cartLine.qtyOrdered || undefined,
+                        queryID: context.queryId,
+                    },
+                ],
+                objectIDs: [objectId],
+                queryID: queryId,
+                userToken,
+            });
+        },
+        sendAddToCartFromSearchResultPageEvent({ cartLine, objectId }) {
+            if (!context.index)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            if (!context.queryId)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+            aa('addedToCartObjectIDsAfterSearch', {
+                currency: getCurrencyFromPriceString(cartLine.pricing?.actualPriceDisplay),
+                eventName: 'SRP: AddToCart ClickedAfterSearch',
+                index: context.index,
+                objectData: [
+                    {
+                        price: cartLine.pricing?.actualPrice || undefined,
+                        quantity: cartLine.qtyOrdered || undefined,
+                        queryID: context.queryId,
+                    },
+                ],
+                objectIDs: [objectId],
+                queryID: context.queryId,
+                userToken,
+            });
+        },
+        sendAddToWishListFromProductListPageEvent({ objectId, position }) {
+            if (!context.index)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            if (!context.queryId)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+            aa('clickedObjectIDsAfterSearch', {
+                eventName: 'PLP: Product Added to Wishlist',
+                index: context.index,
+                objectIDs: [objectId],
+                positions: [position],
+                queryID: context.queryId,
+                userToken,
+            });
+        },
+        sendAddToWishListFromSearchEvent({ objectId, position, queryId }) {
+            if (!context.index)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            aa('clickedObjectIDsAfterSearch', {
+                eventName: 'SRP: Product Added to Wishlist',
+                index: context.index,
+                objectIDs: [objectId],
+                positions: [position],
+                queryID: queryId,
+                userToken,
+            });
+        },
+        sendAddToWishListFromSearchResultPageEvent({ objectId, position, }) {
+            if (!context.index)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            if (!context.queryId)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+            aa('clickedObjectIDsAfterSearch', {
+                eventName: 'SRP: Product Added to Wishlist',
+                index: context.index,
+                objectIDs: [objectId],
+                positions: [position],
+                queryID: context.queryId,
+                userToken,
+            });
+        },
+        sendProductClickFromProductListPageEvent({ objectId, position }) {
+            if (!objectId)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            if (!context.index)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            if (!context.queryId)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+            aa('clickedObjectIDsAfterSearch', {
+                eventName: 'PLP: Product Clicked',
+                index: context.index,
+                objectIDs: [objectId],
+                positions: [position],
+                queryID: context.queryId,
+                userToken,
+            });
+            setGlobalState({
+                index: context.index,
+                queryId: context.queryId,
+            });
+        },
+        sendProductClickFromSearchEvent({ objectId, position, queryId }) {
+            if (!objectId)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            if (!context.index)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            aa('clickedObjectIDsAfterSearch', {
+                eventName: 'SRP: Product Clicked',
+                index: context.index,
+                objectIDs: ensureArray(objectId),
+                positions: ensureArray(position),
+                queryID: queryId,
+                userToken,
+            });
+            setGlobalState({
+                index: context.index,
+                queryId,
+            });
+        },
+        sendProductClickFromSearchResultPageEvent({ objectId, position }) {
+            if (!objectId)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            if (!context.index)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no index', context);
+            if (!context.queryId)
+                return console.warn('Unable to send clickedObjectIDsAfterSearch event, no queryId', context);
+            aa('clickedObjectIDsAfterSearch', {
+                eventName: 'SRP: Product Clicked',
+                index: context.index,
+                objectIDs: [objectId],
+                positions: [position],
+                queryID: context.queryId,
+                userToken,
+            });
+            setGlobalState({
+                index: context.index,
+                queryId: context.queryId,
+            });
+        },
+    };
+}
+
+export { useAlgoliaInsights };

package/dist/algolia/use-algolia-instant-search-state.js

@@ -0,0 +1,25 @@
+"use client";
+import { useGlobalState } from '../shared/providers/global-state-provider.js';
+
+const useAlgoliaInstantSearchStateIndex = () => useGlobalState('algolia-global-state-index');
+const useAlgoliaInstantSearchStateQueryId = () => useGlobalState('algolia-global-state-queryId');
+const useAlgoliaInstantSearchStateOnline = (initialState) => useGlobalState('algolia-global-state-online', initialState ?? true);
+const useAlgoliaInstantSearchStateStatus = (initialState) => useGlobalState('algolia-global-state-status', initialState ?? 'idle');
+function useAlgoliaInstantSearchState(initialState) {
+    const [index, setIndex] = useAlgoliaInstantSearchStateIndex();
+    const [queryId, setQueryId] = useAlgoliaInstantSearchStateQueryId();
+    const [online, setOnline] = useAlgoliaInstantSearchStateOnline(initialState?.online);
+    const [status, setStatus] = useAlgoliaInstantSearchStateStatus(initialState?.status);
+    return {
+        index,
+        online,
+        queryId,
+        setIndex,
+        setOnline,
+        setQueryId,
+        setStatus,
+        status,
+    };
+}
+
+export { useAlgoliaInstantSearchState, useAlgoliaInstantSearchStateIndex, useAlgoliaInstantSearchStateOnline, useAlgoliaInstantSearchStateQueryId, useAlgoliaInstantSearchStateStatus };

package/dist/algolia/use-algolia-search.js

@@ -0,0 +1,41 @@
+"use client";
+import { useContext } from 'react';
+import { transformAlgoliaProductHitToProductHit, transformAlgoliaPromoHitToPromoHit } from '../shared/model/hit.js';
+import { isAlgoliaProductHit } from './algolia-hit-type.js';
+import { GlobalSearchContext } from './algolia-search-provider.js';
+
+function useAlgoliaSearch() {
+    const globalSearch = useContext(GlobalSearchContext);
+    if (!globalSearch) {
+        throw new Error('This component must be wrapped with a GlobalSearchProvider');
+    }
+    const { state } = globalSearch;
+    const products = state.collections
+        .map(collection => ({
+        ...collection,
+        items: collection.items.map(hit => isAlgoliaProductHit(hit)
+            ? transformAlgoliaProductHitToProductHit(hit)
+            : transformAlgoliaPromoHitToPromoHit(hit)),
+    }))
+        .find(collection => collection.source.sourceId === 'productsPlugin');
+    const popularSearches = state.collections.find(collection => collection.source.sourceId === 'popularSearchesPlugin');
+    const recentSearches = state.collections.find(collection => collection.source.sourceId === 'recentSearchesPlugin');
+    const quickAccess = state.collections.find(collection => collection.source.sourceId === 'quickAccessPlugin');
+    const popularCategories = state.collections.find(collection => collection.source.sourceId === 'popularCategoriesPlugin');
+    const querySuggestions = state.collections.find(collection => collection.source.sourceId === 'querySuggestionsPlugin');
+    const categories = state.collections.find(collection => collection.source.sourceId === 'categoriesPlugin');
+    const hasResults = !!products?.items.length;
+    return {
+        ...globalSearch,
+        categories,
+        hasResults,
+        popularCategories,
+        popularSearches,
+        products,
+        querySuggestions,
+        quickAccess,
+        recentSearches,
+    };
+}
+
+export { useAlgoliaSearch };

package/dist/background-overlay/background-overlay.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import clsx from 'clsx';
+import styles from './background-overlay.module.css.js';
+
+function BackgroundOverlay({ className, isOpen, onClose, }) {
+    const [, setRender] = useState(isOpen);
+    const nodeRef = useRef(null);
+    useEffect(() => {
+        if (isOpen)
+            setRender(isOpen);
+    }, [isOpen]);
+    useEffect(() => {
+        const node = nodeRef.current;
+        if (!node || isOpen)
+            return;
+        const handleAnimationEnd = () => {
+            setRender(false);
+            node.removeEventListener('animationend', handleAnimationEnd);
+        };
+        node.addEventListener('animationend', handleAnimationEnd);
+    }, [isOpen]);
+    if (typeof document === 'undefined')
+        return null;
+    return ReactDOM.createPortal(jsx("div", { ref: nodeRef, className: clsx(styles['background-overlay'], {
+            [styles['open']]: isOpen,
+            [styles['close']]: !isOpen,
+        }, className), onClick: onClose, onKeyUp: event => {
+            if (event.key === 'Escape')
+                onClose?.();
+        }, role: "none" }), document.body);
+}
+
+export { BackgroundOverlay };

package/dist/background-overlay/background-overlay.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"background-overlay":"background-overlay-module-mGiNQ","open":"background-overlay-module-5Uxcl","close":"background-overlay-module-GRInQ"};
+
+export { styles as default };

package/dist/badges/badge/badge.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import clsx from 'clsx';
+import styles from './badge.module.css.js';
+
+const ANIMATION_DURATION = 600;
+function Badge({ count, variant = 'red' }) {
+    const [isAnimating, setIsAnimating] = useState(false);
+    useEffect(() => {
+        if (count === undefined)
+            return;
+        setIsAnimating(true);
+        const timer = setTimeout(() => setIsAnimating(false), ANIMATION_DURATION);
+        return () => clearTimeout(timer);
+    }, [count]);
+    return (jsx("span", { className: clsx(styles.badge, styles[variant], {
+            [styles['is-animating']]: isAnimating,
+        }), style: { '--animation-duration': `${ANIMATION_DURATION}ms` }, children: count !== undefined && jsx("span", { className: styles.count, children: count }) }, count));
+}
+
+export { Badge };

package/dist/badges/badge/badge.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"badge":"badge-module-X5Au9","count":"badge-module-ododp","is-animating":"badge-module-Q03Go","pulse":"badge-module-YSs-l","red":"badge-module-kqfth","orange":"badge-module-Y5LU3","green":"badge-module-S-L8C"};
+
+export { styles as default };

package/dist/badges/badge/icon-with-badge/icon-with-badge.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './icon-with-badge.module.css.js';
+
+function IconWithBadge({ badge, icon }) {
+    return (jsxs("div", { className: styles['icon-with-badge'], children: [icon, jsx("div", { className: styles['badge-wrapper'], children: badge })] }));
+}
+
+export { IconWithBadge };

package/dist/badges/badge/icon-with-badge/icon-with-badge.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"icon-with-badge":"icon-with-badge-module-eCTIN","badge-wrapper":"icon-with-badge-module-NUjwN"};
+
+export { styles as default };

package/dist/badges/tag/tag.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './tag.module.css.js';
+
+function Tag({ children }) {
+    if (!children)
+        return null;
+    return (jsxs("div", { className: styles.tag, children: [jsx("div", { className: styles.body, children: children }), jsx("svg", { className: styles.shape, height: "16", viewBox: "0 0 9 16", width: "9", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.92461763,0 L0,0 L0,16 L1.92461763,16 L6.4117887,16 L8.87489381,7.57121588 C9.23711515,6.3325062 8.79482383,4.99454094 7.78060408,4.2560794 L1.92461763,0 Z", fill: "currentColor" }) })] }));
+}
+
+export { Tag };

package/dist/badges/tag/tag.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
+
+export { styles as default };