@sonic-equipment/ui 0.0.119 → 120.0.0

package/dist/forms/textarea/textarea.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useCallback, useEffect } from 'react';
+import { useContextProps, TextAreaContext, TextArea as TextArea$1 } from 'react-aria-components';
+import styles from './textarea.module.css.js';
+
+/**
+ * This component is used to create a textarea that can grow as the user types.
+ * It uses the scrollHeight property to calculate the height of the textarea.
+ * The initial height is calculated based on the style of the textarea.
+ * The height is updated everytime the user types.
+ */
+const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
+    const textAreaRef = useRef(null);
+    const [props, ref] = useContextProps(textAreaProps, textAreaRef, TextAreaContext);
+    const initialHeight = useRef(null);
+    const updateHeight = useCallback(() => {
+        if (!ref.current)
+            return;
+        if (!autoGrow)
+            return ref.current.style.removeProperty('height');
+        ref.current.style.height = `${initialHeight.current}px`;
+        if (ref.current.scrollHeight > (initialHeight.current || 0)) {
+            ref.current.style.height = ref.current.scrollHeight + 'px';
+        }
+    }, [autoGrow, ref]);
+    useEffect(() => {
+        initialHeight.current = null;
+        ref.current?.style.removeProperty('height');
+    }, [ref, size]);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        if (initialHeight.current === null &&
+            typeof getComputedStyle !== 'undefined') {
+            const styleHeight = getComputedStyle(ref.current).height.match(/\d+/)?.[0];
+            initialHeight.current = styleHeight
+                ? Number.parseFloat(styleHeight)
+                : null;
+        }
+        updateHeight();
+    }, [ref, autoGrow, updateHeight, size]);
+    return (jsx("div", { className: styles['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
+                ref.current =
+                    node;
+                textAreaRef.current = node;
+            }, onInput: e => {
+                updateHeight();
+                props.onInput?.(e);
+            } }) }));
+});
+TextArea.displayName = 'TextArea';
+
+export { TextArea };

package/dist/forms/textarea/textarea.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
+
+export { styles as default };

package/dist/global-search/categories-grid/categories-grid.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { CategoryCard } from '../../cards/category-card/category-card.js';
+import styles from './categories-grid.module.css.js';
+
+function CategoriesGrid({ categories, onItemClick, }) {
+    return (jsx("div", { className: styles['categories-grid'], children: categories.map(category => (jsx("div", { className: styles['category'], children: jsx(CategoryCard, { className: styles['category-grid-card'], href: category.href, image: {
+                    fit: 'contain',
+                    image: category.image,
+                    title: category.title,
+                }, onClick: onItemClick, title: category.title }, category.title) }, category.title))) }));
+}
+
+export { CategoriesGrid };

package/dist/global-search/categories-grid/categories-grid.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"categories-grid":"categories-grid-module-C751R","category":"categories-grid-module-7OZS1","category-grid-card":"categories-grid-module-Q7i00"};
+
+export { styles as default };

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext } from 'react';
+import { AlgoliaSearchProvider } from '../../algolia/algolia-search-provider.js';
+import { BackgroundOverlay } from '../../background-overlay/background-overlay.js';
+import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
+import styles from '../global-search.module.css.js';
+
+const GlobalSearchDisclosureContext = createContext(null);
+function GlobalSearchProvider({ children, searchClient, }) {
+    const { close, isOpen, open, toggle } = useDisclosure(false);
+    return (jsx(AlgoliaSearchProvider, { searchClient: searchClient, children: jsxs(GlobalSearchDisclosureContext.Provider, { value: { close, isOpen, open, toggle }, children: [children, jsx(BackgroundOverlay, { className: styles['global-search-background-overlay-position'], isOpen: isOpen, onClose: close })] }) }));
+}
+
+export { GlobalSearchDisclosureContext, GlobalSearchProvider };

package/dist/global-search/global-search-provider/use-search-disclosure.js

@@ -0,0 +1,13 @@
+"use client";
+import { useContext } from 'react';
+import { GlobalSearchDisclosureContext } from './global-search-provider.js';
+
+const useGlobalSearchDisclosure = () => {
+    const context = useContext(GlobalSearchDisclosureContext);
+    if (!context) {
+        throw new Error('useGlobalSearchDisclosure must be used within a GlobalSearchDisclosureProvider');
+    }
+    return context;
+};
+
+export { useGlobalSearchDisclosure };

package/dist/global-search/global-search.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEffect, useRef } from 'react';
+import { Transition, TransitionGroup } from 'react-transition-group';
+import clsx from 'clsx';
+import { useAlgoliaSearch } from '../algolia/use-algolia-search.js';
+import { useOnNavigate } from '../shared/routing/route-provider.js';
+import { useGlobalSearchDisclosure } from './global-search-provider/use-search-disclosure.js';
+import { ConnectedSearchInput } from './search-input/connected-search-input.js';
+import { SearchResultPanel } from './search-result-panel/search-result-panel.js';
+import styles from './global-search.module.css.js';
+
+function SearchRoot() {
+    const { autocomplete, inputRef } = useAlgoliaSearch();
+    const { isOpen } = useGlobalSearchDisclosure();
+    useEffect(() => {
+        if (inputRef.current === null)
+            return;
+        if (isOpen) {
+            inputRef.current.focus();
+        }
+        else {
+            inputRef.current.blur();
+        }
+    }, [inputRef, isOpen]);
+    return (jsx("div", { className: styles['search-root'], children: jsx(Transition, { in: isOpen, nodeRef: inputRef, timeout: 300, children: transitionState => (jsxs("div", { className: clsx(styles['search-container'], styles[transitionState]), ...autocomplete.getRootProps({}), children: [jsx("div", { className: styles.input, children: jsx(ConnectedSearchInput, {}) }), jsx(SearchResultPanel, {})] })) }) }));
+}
+/**
+ * Global search using algolia autocomplete with a custom renderer
+ * https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/
+ *
+ * Highly influenced by the two column layout sandbox which
+ * uses the autocomplete widgets
+ * https://codesandbox.io/p/sandbox/github/algolia/autocomplete/tree/next/examples/two-column-layout
+ */
+function GlobalSearch() {
+    const panelRef = useRef(null);
+    const { close, isOpen } = useGlobalSearchDisclosure();
+    useOnNavigate(close);
+    return (jsx(TransitionGroup, { children: jsx(Transition, { in: isOpen, nodeRef: panelRef, timeout: 300, children: state => (jsx("div", { ref: panelRef, className: state, children: jsx("div", { className: styles['search-wrapper'], children: jsx(SearchRoot, {}) }) })) }) }));
+}
+
+export { GlobalSearch, SearchRoot };

package/dist/global-search/global-search.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"global-search-background-overlay-position":"global-search-module-T0bEf","search-wrapper":"global-search-module-d2g2F","search-root":"global-search-module-Sx8Lx","search-container":"global-search-module--orCF","input":"global-search-module-vXnL6","entering":"global-search-module-MYwlp","entered":"global-search-module-Jmt3c","exiting":"global-search-module-gQQfY","exited":"global-search-module-AABcw"};
+
+export { styles as default };

package/dist/global-search/plugins/categories-plugin.js

@@ -0,0 +1,35 @@
+import { getAlgoliaResults } from '@algolia/autocomplete-preset-algolia';
+
+const categoriesPlugin = ({ productsIndexName, searchClient, }) => {
+    return {
+        getSources() {
+            return [
+                {
+                    getItemInputValue({ item }) {
+                        return item.listCategories.at(-1) || '';
+                    },
+                    getItems({ query }) {
+                        return getAlgoliaResults({
+                            queries: [
+                                {
+                                    indexName: productsIndexName,
+                                    params: {
+                                        hitsPerPage: 1,
+                                    },
+                                    query,
+                                },
+                            ],
+                            searchClient,
+                        });
+                    },
+                    onSelect({ setIsOpen }) {
+                        setIsOpen(true);
+                    },
+                    sourceId: 'categoriesPlugin',
+                },
+            ];
+        },
+    };
+};
+
+export { categoriesPlugin };

package/dist/global-search/plugins/popular-categories-plugin.js

@@ -0,0 +1,32 @@
+import { getAlgoliaResults } from '@algolia/autocomplete-preset-algolia';
+
+const popularCategoriesPlugin = ({ productsIndexName, searchClient, }) => {
+    return {
+        getSources() {
+            return [
+                {
+                    getItems() {
+                        return getAlgoliaResults({
+                            queries: [
+                                {
+                                    indexName: productsIndexName,
+                                    params: {
+                                        ruleContexts: ['no-results'],
+                                    },
+                                },
+                            ],
+                            searchClient,
+                            transformResponse({ results }) {
+                                return (results[0]?.userData?.[0]
+                                    ?.noResultsCategories || []);
+                            },
+                        });
+                    },
+                    sourceId: 'popularCategoriesPlugin',
+                },
+            ];
+        },
+    };
+};
+
+export { popularCategoriesPlugin };

package/dist/global-search/plugins/popular-searches-plugin.js

@@ -0,0 +1,23 @@
+import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
+
+const popularSearchesPlugin = ({ searchClient, suggestionsIndexName, }) => createQuerySuggestionsPlugin({
+    getSearchParams() {
+        return {
+            hitsPerPage: 4,
+            query: '',
+        };
+    },
+    indexName: suggestionsIndexName,
+    searchClient,
+    transformSource({ source }) {
+        return {
+            ...source,
+            onSelect({ setIsOpen }) {
+                setIsOpen(true);
+            },
+            sourceId: 'popularSearchesPlugin',
+        };
+    },
+});
+
+export { popularSearchesPlugin };

package/dist/global-search/plugins/query-suggestions-plugin.js

@@ -0,0 +1,21 @@
+import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
+
+const querySuggestionsPlugin = ({ searchClient, suggestionsIndexName, }) => createQuerySuggestionsPlugin({
+    getSearchParams({ state }) {
+        return {
+            hitsPerPage: state.query ? 10 : 0,
+        };
+    },
+    indexName: suggestionsIndexName,
+    searchClient,
+    transformSource({ source }) {
+        return {
+            ...source,
+            onSelect({ setIsOpen }) {
+                setIsOpen(true);
+            },
+        };
+    },
+});
+
+export { querySuggestionsPlugin };

package/dist/global-search/plugins/quick-access-plugin.js

@@ -0,0 +1,34 @@
+import { getAlgoliaResults } from '@algolia/autocomplete-preset-algolia';
+
+const quickAccessPlugin = ({ productsIndexName, searchClient, }) => {
+    return {
+        getSources({ query }) {
+            return [
+                {
+                    getItems() {
+                        return getAlgoliaResults({
+                            queries: [
+                                {
+                                    indexName: productsIndexName,
+                                    params: {
+                                        hitsPerPage: 0,
+                                        ruleContexts: ['quick-access'],
+                                    },
+                                    query,
+                                },
+                            ],
+                            searchClient,
+                            transformResponse({ results }) {
+                                return (results[0]?.userData?.[0]
+                                    ?.quickAccess || []);
+                            },
+                        });
+                    },
+                    sourceId: 'quickAccessPlugin',
+                },
+            ];
+        },
+    };
+};
+
+export { quickAccessPlugin };

package/dist/global-search/plugins/recent-searches-plugin.js

@@ -0,0 +1,16 @@
+import { createLocalStorageRecentSearchesPlugin, search } from '@algolia/autocomplete-plugin-recent-searches';
+
+const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
+    key: 'recent-algolia-searches',
+    search(params) {
+        return search({ ...params, limit: params.query ? 1 : 4 });
+    },
+    transformSource({ onRemove, source }) {
+        return {
+            ...source,
+            onRemove,
+        };
+    },
+});
+
+export { recentSearchesPlugin };

package/dist/global-search/search-highlight/highlight.js

@@ -0,0 +1,13 @@
+import { createElement, Fragment } from 'react';
+import { parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
+
+function Highlight({ attribute, hit, tagName = 'mark', }) {
+    return createElement(Fragment, {}, parseAlgoliaHitHighlight({ attribute, hit }).map(({ isHighlighted, value }, index) => {
+        if (isHighlighted) {
+            return createElement(tagName, { key: index }, value);
+        }
+        return value;
+    }));
+}
+
+export { Highlight };

package/dist/global-search/search-input/connected-search-input.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useAlgoliaSearch } from '../../algolia/use-algolia-search.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { useNavigate } from '../../shared/routing/route-provider.js';
+import { useGlobalSearchDisclosure } from '../global-search-provider/use-search-disclosure.js';
+import { SearchInput } from './search-input.js';
+
+function ConnectedSearchInput() {
+    const { autocomplete, formRef, inputRef } = useAlgoliaSearch();
+    const { close } = useGlobalSearchDisclosure();
+    const t = useFormattedMessage();
+    const navigate = useNavigate();
+    return (jsx(SearchInput, { autocomplete: autocomplete, formRef: formRef, inputRef: inputRef, onCancel: close, onSubmit: () => {
+            if (!inputRef.current?.value)
+                return;
+            navigate(`/search?keyword=${encodeURIComponent(inputRef.current.value)}`);
+            return close();
+        }, placeholder: t('What are you searching for?') }));
+}
+
+export { ConnectedSearchInput };

package/dist/global-search/search-input/search-input.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { IconButton } from '../../buttons/icon-button/icon-button.js';
+import { SolidCloseIcon } from '../../icons/solid/solid-close-icon.js';
+import { StrokeSearchIcon } from '../../icons/stroke/stroke-search-icon.js';
+import styles from './search-input.module.css.js';
+
+function SearchInput({ autocomplete, formRef, inputRef, onCancel, onSubmit, placeholder, }) {
+    const formProps = autocomplete?.getFormProps({
+        inputElement: inputRef.current,
+    });
+    const inputProps = autocomplete?.getInputProps({
+        inputElement: inputRef.current,
+    });
+    const labelProps = autocomplete?.getLabelProps({});
+    function handleSubmit(e) {
+        if (!inputProps?.value)
+            return;
+        formProps?.onSubmit(e);
+        onSubmit?.();
+    }
+    return (jsx("form", { ref: formRef, className: styles.form, ...formProps, onSubmit: handleSubmit, children: jsxs("div", { className: styles['input-container'], children: [jsx("label", { className: styles.label, htmlFor: "search", ...labelProps, children: jsx(StrokeSearchIcon, { className: clsx(styles['icon-search'], styles.icon) }) }), jsx("input", { ref: inputRef, name: "search", onKeyUp: e => {
+                        if (e.key === 'Escape')
+                            onCancel?.();
+                    }, ...inputProps, className: styles.input, placeholder: placeholder }), inputProps?.value && (jsx(IconButton, { className: styles['reset-btn'], color: "secondary", onClick: () => formRef.current?.reset(), type: "reset", children: jsx(SolidCloseIcon, {}) }))] }) }));
+}
+
+export { SearchInput };

package/dist/global-search/search-input/search-input.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"form":"search-input-module-xCCzd","input-container":"search-input-module-okP8k","icon":"search-input-module-GZbhK","label":"search-input-module-vKCm4","reset-btn":"search-input-module-lYseZ","input":"search-input-module-bELFK"};
+
+export { styles as default };

package/dist/global-search/search-result-panel/panel-content.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useAlgoliaSearch } from '../../algolia/use-algolia-search.js';
+import { NoSearch } from './sections/no-search.js';
+import { NoSearchResults } from './sections/no-search-results.js';
+import { WithResults } from './sections/with-results.js';
+
+function PanelContent() {
+    const { hasResults, state } = useAlgoliaSearch();
+    return (jsx(Fragment, { children: state.query.length === 0 ? (jsx(NoSearch, {})) : hasResults ? (jsx(WithResults, {})) : (jsx(NoSearchResults, {})) }));
+}
+
+export { PanelContent };

package/dist/global-search/search-result-panel/search-result-panel.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Transition } from 'react-transition-group';
+import clsx from 'clsx';
+import { useAlgoliaSearch } from '../../algolia/use-algolia-search.js';
+import { useGlobalSearchDisclosure } from '../global-search-provider/use-search-disclosure.js';
+import { PanelContent } from './panel-content.js';
+import styles from './search-result-panel.module.css.js';
+
+function SearchResultPanel() {
+    const { autocomplete, panelRef } = useAlgoliaSearch();
+    const { isOpen } = useGlobalSearchDisclosure();
+    // https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/#check-network-status
+    return (jsx(Transition, { in: isOpen, nodeRef: panelRef, timeout: 300, children: transitionState => (jsx("div", { ref: panelRef, className: clsx(styles['search-result-panel'], styles[transitionState]), ...autocomplete.getPanelProps({}), children: jsx(PanelContent, {}) })) }));
+}
+
+export { SearchResultPanel };

package/dist/global-search/search-result-panel/search-result-panel.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"search-result-panel":"search-result-panel-module-KBrc9","entering":"search-result-panel-module-Us8rb","entered":"search-result-panel-module-7UxfH","exiting":"search-result-panel-module-3xEiy","exited":"search-result-panel-module-xSeC-"};
+
+export { styles as default };

package/dist/global-search/search-result-panel/sections/no-search-results.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useAlgoliaSearch } from '../../../algolia/use-algolia-search.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { CategoriesGrid } from '../../categories-grid/categories-grid.js';
+import { useGlobalSearchDisclosure } from '../../global-search-provider/use-search-disclosure.js';
+import { SearchSection } from '../../search-section/search-section.js';
+import { SectionContainer } from './section-container.js';
+import styles from './search-content.module.css.js';
+
+function NoSearchResults() {
+    return (jsx(Fragment, { children: jsx(SectionContainer, { leftContent: jsx(NotFound, {}), rightContent: jsx(PopularCategoriesSection, {}) }) }));
+}
+function NotFound() {
+    const { state } = useAlgoliaSearch();
+    const t = useFormattedMessage();
+    return (jsx(SearchSection, { title: t('Sorry, we could not find matches for'), children: jsx("div", { className: styles['no-results-text'], children: jsxs("div", { className: styles.section, children: [jsxs("p", { className: styles.query, children: ["'", state.query, "'"] }), jsxs("div", { className: styles.suggestions, children: [jsx("p", { children: jsx(FormattedMessage, { id: "You could try" }) }), jsxs("ul", { className: styles.list, children: [jsx("li", { children: jsx(FormattedMessage, { id: "Searching again using more general terms" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Double check your spelling" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Use fewer keywords" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Exploring our products by category" }) })] })] })] }) }) }));
+}
+function PopularCategoriesSection() {
+    const { popularCategories: collection } = useAlgoliaSearch();
+    const t = useFormattedMessage();
+    const { close } = useGlobalSearchDisclosure();
+    if (!collection)
+        return null;
+    const { items } = collection;
+    return (jsx(SearchSection, { title: t('Explore by categories'), children: jsx("div", { className: styles['categories-grid-container'], children: jsx(CategoriesGrid, { categories: items, onItemClick: close }) }) }));
+}
+
+export { NoSearchResults };

package/dist/global-search/search-result-panel/sections/no-search.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useAlgoliaSearch } from '../../../algolia/use-algolia-search.js';
+import { CardCarousel } from '../../../carousel/card-carousel/card-carousel.js';
+import { StrokeSearchIcon } from '../../../icons/stroke/stroke-search-icon.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { PromoCard } from '../../../promos/promo-card/promo-card.js';
+import { RouteLink } from '../../../shared/routing/route-link.js';
+import { useGlobalSearchDisclosure } from '../../global-search-provider/use-search-disclosure.js';
+import { Highlight } from '../../search-highlight/highlight.js';
+import { SearchList } from '../../search-section/search-list.js';
+import { SearchListItem } from '../../search-section/search-list-item.js';
+import { SearchSection } from '../../search-section/search-section.js';
+import { SectionContainer } from './section-container.js';
+import styles from './search-content.module.css.js';
+
+function NoSearch() {
+    return (jsx(SectionContainer, { leftContent: jsxs("div", { children: [jsx(RecentSearchesSection, {}), jsx(PopularSearchesSection, {})] }), rightContent: jsx(QuickAccessSection, {}) }));
+}
+function PopularSearchesSection() {
+    const { autocomplete, popularSearches: collection } = useAlgoliaSearch();
+    const t = useFormattedMessage();
+    if (!collection)
+        return null;
+    const { items, source } = collection;
+    return (jsx(SearchSection, { title: t('Popular searches'), children: jsx(SearchList, { ...autocomplete.getListProps({
+                source,
+            }), children: items.slice(0, 4).map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
+                    item,
+                    source: source,
+                }), icon: jsx(StrokeSearchIcon, {}), text: jsx(Highlight, { attribute: "query", hit: item }) }, item.objectID))) }) }));
+}
+function RecentSearchesSection() {
+    const { autocomplete, recentSearches: collection } = useAlgoliaSearch();
+    const t = useFormattedMessage();
+    if (!collection) {
+        return null;
+    }
+    const { items, source } = collection;
+    return (jsx(SearchSection, { button: jsx(RouteLink, { hasUnderline: true, onClick: () => items.forEach(item => source.onRemove(item.id)), children: jsx(FormattedMessage, { id: "Clear" }) }), title: t('Recent searches'), children: jsx(SearchList, { ...autocomplete.getListProps({ source }), children: items.map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
+                    item,
+                    source: source,
+                }), icon: jsx(StrokeSearchIcon, {}), isRemovable: true, onRemove: () => source.onRemove(item.id), text: jsx(Highlight, { attribute: "label", hit: item }) }, item.id))) }) }));
+}
+function QuickAccessSection() {
+    const { quickAccess: collection } = useAlgoliaSearch();
+    const { close } = useGlobalSearchDisclosure();
+    const t = useFormattedMessage();
+    if (!collection)
+        return;
+    const { items } = collection;
+    return (jsx(SearchSection, { headerClassName: styles['quick-access-section-header'], title: t('Quick access'), children: jsx("div", { className: styles['product-results'], children: jsx(CardCarousel, { cards: items.map((item, index) => (jsx(PromoCard, { href: item.action.url, image: item.image, onClick: close }, `${index}-${item.action.url}`))), cardsPerView: "auto", cardWidth: "narrow" }) }) }));
+}
+
+export { NoSearch };

package/dist/global-search/search-result-panel/sections/search-content.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"section-container":"search-content-module-ZMwlB","content":"search-content-module-KIok6","left":"search-content-module-YRLIf","right":"search-content-module-qK5sg","button-container":"search-content-module-w-ORq","show-all-button":"search-content-module-bO1Q0","product-results":"search-content-module-bcFCH","quick-access-section-header":"search-content-module-HrHCE","product-results-section-header":"search-content-module-9bgxF","no-results-text":"search-content-module-H-FX2","query":"search-content-module-LbQnK","suggestions":"search-content-module-mhiBZ","list":"search-content-module-coPAt"};
+
+export { styles as default };

package/dist/global-search/search-result-panel/sections/section-container.js

@@ -0,0 +1,8 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './search-content.module.css.js';
+
+function SectionContainer({ buttons, leftContent, rightContent, }) {
+    return (jsx("div", { className: styles['section-container'], children: jsxs("div", { className: styles['content'], children: [jsx("div", { className: styles['left'], children: leftContent }), jsxs("div", { className: styles['right'], children: [rightContent, jsx("div", { className: styles['button-container'], children: buttons })] })] }) }));
+}
+
+export { SectionContainer };