@sonic-equipment/ui 0.0.119 → 1.0.0

package/dist/global-search/search-section/search-list-item.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"search-list-item":"search-list-item-module-WXp77","content":"search-list-item-module-CPrhz","text":"search-list-item-module--5uqN","clear-filter":"search-list-item-module-wwVwX"};
+
+export { styles as default };

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

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './search-list.module.css.js';
+
+function SearchList({ ariaLabelledby, children, className, id, }) {
+    return (jsx("ul", { "aria-labelledby": ariaLabelledby, className: clsx(styles['search-list'], className), id: id, children: children }));
+}
+
+export { SearchList };

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

@@ -0,0 +1,3 @@
+var styles = {"search-list":"search-list-module-vRuMO"};
+
+export { styles as default };

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

@@ -0,0 +1,10 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './search-section.module.css.js';
+
+function SearchSection({ button, children, className, headerClassName, title, }) {
+    return (jsxs("div", { className: clsx(styles['search-section'], className), children: [jsxs("div", { className: clsx(styles.header, headerClassName), children: [title && jsx("h2", { className: styles.title, children: title }), button && button] }), children] }));
+}
+
+export { SearchSection };

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

@@ -0,0 +1,3 @@
+var styles = {"search-section":"search-section-module-qaTiw","header":"search-section-module-E--U2","title":"search-section-module-AHlDR"};
+
+export { styles as default };

package/dist/global-search/types.d.ts

@@ -1,6 +1,7 @@
-import { AutocompleteApi, AutocompleteState as _AutocompleteState } from '@algolia/autocomplete-core';
+import { AutocompleteApi, AutocompleteState as _AutocompleteState } from '@algolia/autocomplete-core/dist/esm';
 import { SearchClient } from 'algoliasearch';
 import { AlgoliaProductHit } from '../algolia/algolia-hit-type';
+import { Indexes } from '../algolia/algolia-index-config';
 import { CategoryHit } from './plugins/categories-plugin';
 import { PopularCategoryHit } from './plugins/popular-categories-plugin';
 import { PopularSearchHit } from './plugins/popular-searches-plugin';
@@ -13,6 +14,7 @@ export type AutocompleteState = _AutocompleteState<AutocompleteItem>;
 export type GlobalSearchContextValue = {
     autocomplete: Autocomplete;
     formRef: React.RefObject<HTMLFormElement>;
+    indexes: Indexes;
     inputRef: React.RefObject<HTMLInputElement>;
     panelRef: React.RefObject<HTMLDivElement>;
     productsIndexName: string;

package/dist/header/buttons/account/connected-account-button.d.ts

@@ -0,0 +1,5 @@
+export interface ConnectedAccountButtonProps {
+    className?: string;
+    'data-test-selector'?: string;
+}
+export declare function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelector, }: ConnectedAccountButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/buttons/account/connected-account-button.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { Popover } from 'react-aria-components';
+import { IconButton } from '../../../buttons/icon-button/icon-button.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { QuickAccessMenu } from '../../../navigation/quick-access-menu/quick-access-menu.js';
+import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
+import { useSignOut } from '../../../shared/api/storefront/hooks/authentication/use-sign-out.js';
+import { useDisclosure } from '../../../shared/hooks/use-disclosure.js';
+import { useOnNavigate } from '../../../shared/routing/use-on-navigate.js';
+import styles from './connected-account-button.module.css.js';
+
+function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelector, }) {
+    const t = useFormattedMessage();
+    const { close, isOpen, open, toggle } = useDisclosure(false);
+    const triggerRef = useRef(null);
+    useOnNavigate(close);
+    const signOut = useSignOut({ onSignOut: close });
+    const { data, isLoading: isLoadingSession } = useFetchSession();
+    const firstName = data?.firstName ? data.firstName.trim() : undefined;
+    const lastName = data?.lastName ? data.lastName.trim() : undefined;
+    const customerName = firstName ? [firstName, lastName].join(' ') : undefined;
+    const customerCompany = data?.billTo?.companyName;
+    return (jsxs(Fragment, { children: [jsx(IconButton, { ref: triggerRef, badgeLabel: data?.isAuthenticated ? t('Signed in') : t('Signed out'), badgeStatus: data?.isAuthenticated ? 'on' : 'off', className: className, "data-authenticated": data?.isAuthenticated ? true : false, "data-test-selector": dataTestSelector, icon: "UserSolid", isDisabled: isLoadingSession, label: t('My Sonic'), onClick: toggle }), jsx(Popover, { className: styles['popover'], isOpen: isOpen, onOpenChange: state => (state ? open() : close()), placement: "bottom", triggerRef: triggerRef, children: jsx(QuickAccessMenu, { className: styles['quick-access-menu'], customerCompany: customerCompany, customerName: customerName, isAuthenticated: data?.isAuthenticated, isGuest: data?.isGuest, onSignOut: () => signOut(typeof window === 'undefined'
+                        ? undefined
+                        : { returnUrl: window.location.href }) }) })] }));
+}
+
+export { ConnectedAccountButton };

package/dist/header/buttons/account/connected-account-button.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"popover":"connected-account-button-module-d7qyN"};
+
+export { styles as default };

package/dist/header/buttons/cart/connected-cart-button.d.ts

@@ -0,0 +1,7 @@
+export interface ConnectedCartButtonProps {
+    className?: string;
+    'data-test-selector'?: string;
+    href?: string;
+    onClick?: () => void;
+}
+export declare function ConnectedCartButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }: ConnectedCartButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/buttons/cart/connected-cart-button.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { IconButton } from '../../../buttons/icon-button/icon-button.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { useFetchCurrentCartCount } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-count.js';
+
+function ConnectedCartButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }) {
+    const count = useFetchCurrentCartCount();
+    const t = useFormattedMessage();
+    return (jsx(IconButton, { badgeCount: count, className: className, "data-count": count, "data-test-selector": dataTestSelector, href: href, icon: "CartSolid", label: t('Shopping cart'), onClick: onClick }));
+}
+
+export { ConnectedCartButton };

package/dist/header/buttons/favorites/connected-favorites-button.d.ts

@@ -0,0 +1,7 @@
+export interface ConnectedFavoritesButtonProps {
+    className?: string;
+    'data-test-selector'?: string;
+    href?: string;
+    onClick?: () => void;
+}
+export declare function ConnectedFavoritesButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }: ConnectedFavoritesButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/buttons/favorites/connected-favorites-button.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { IconButton } from '../../../buttons/icon-button/icon-button.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+
+function ConnectedFavoritesButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }) {
+    const t = useFormattedMessage();
+    return (jsx(IconButton, { className: className, "data-test-selector": dataTestSelector, href: href, icon: "FavoriteSolid", label: t('Favorites'), onClick: onClick }));
+}
+
+export { ConnectedFavoritesButton };

package/dist/header/buttons/hamburger/hamburger-button.d.ts

@@ -0,0 +1,7 @@
+export interface HamburgerButtonProps {
+    'aria-controls': string;
+    'data-test-selector'?: string;
+    isActive: boolean;
+    onActiveChange: (isActive: boolean) => void;
+}
+export declare function HamburgerButton({ 'aria-controls': ariaControls, 'data-test-selector': dataTestSelector, isActive, onActiveChange, }: HamburgerButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/buttons/hamburger/hamburger-button.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { IconButton } from '../../../buttons/icon-button/icon-button.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import styles from './hamburger-button.module.css.js';
+
+function HamburgerButton({ 'aria-controls': ariaControls, 'data-test-selector': dataTestSelector, isActive, onActiveChange, }) {
+    const t = useFormattedMessage();
+    return (jsx(IconButton, { "aria-controls": ariaControls, "aria-expanded": isActive, className: clsx(styles['hamburger-button'], isActive && styles['active']), "data-test-selector": dataTestSelector, label: t('Toggle navigation menu'), onClick: () => onActiveChange(!isActive), children: jsxs("div", { className: styles['hamburger'], role: "presentation", children: [jsx("span", {}), jsx("span", {}), jsx("span", {})] }) }));
+}
+
+export { HamburgerButton };

package/dist/header/buttons/hamburger/hamburger-button.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"hamburger-button":"hamburger-button-module-W6FPI","hamburger":"hamburger-button-module-yrZxr","active":"hamburger-button-module-UXSUP"};
+
+export { styles as default };

package/dist/header/buttons/search/search-button.d.ts

@@ -0,0 +1,7 @@
+export interface SearchButtonProps {
+    'aria-controls': string;
+    'data-test-selector'?: string;
+    isActive: boolean;
+    onActiveChange: (isActive: boolean) => void;
+}
+export declare function SearchButton({ 'aria-controls': ariaControls, 'data-test-selector': dataTestSelector, isActive, onActiveChange, }: SearchButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/buttons/search/search-button.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { IconButton } from '../../../buttons/icon-button/icon-button.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+
+function SearchButton({ 'aria-controls': ariaControls, 'data-test-selector': dataTestSelector, isActive, onActiveChange, }) {
+    const t = useFormattedMessage();
+    return (jsx(IconButton, { "aria-controls": ariaControls, "aria-expanded": typeof isActive === 'boolean' ? isActive : undefined, "data-test-selector": dataTestSelector, icon: "Search", label: t('Search'), onClick: () => onActiveChange(!isActive) }));
+}
+
+export { SearchButton };

package/dist/header/connected-header.d.ts

@@ -0,0 +1,3 @@
+export declare function ConnectedHeader({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/header/connected-header.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useCultureCode } from '../intl/use-culture-code.js';
+import { useFetchNavigationLinks } from '../shared/api/bff/hooks/use-fetch-navigation-links.js';
+import { isNavigationSection } from '../shared/api/bff/model/bff.model.js';
+import { Header } from './header.js';
+
+function ConnectedHeader({ className }) {
+    const cultureCode = useCultureCode();
+    const { data } = useFetchNavigationLinks({ cultureCode });
+    if (data && data.key !== 'navigation')
+        throw new Error('Invalid navigation data');
+    const headerNavigationSection = data?.items
+        .filter(isNavigationSection)
+        .find(item => item.key === 'header');
+    if (data && !headerNavigationSection)
+        throw new Error('Header section not found in navigation data');
+    return (jsx(Header, { className: className, headerNavigationSection: headerNavigationSection, sticky: true }));
+}
+
+export { ConnectedHeader };

package/dist/header/drawers/desktop-navigation-drawer.d.ts

@@ -0,0 +1,8 @@
+import { NavigationLinkGroup } from '../../shared/api/bff/model/bff.model';
+export interface DesktopNavigationDrawerProps {
+    groupId?: string;
+    instanceId?: string;
+    linkGroup?: NavigationLinkGroup;
+    onClosed?: () => void;
+}
+export declare function DesktopNavigationDrawer({ groupId, instanceId, linkGroup, onClosed, }: DesktopNavigationDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/drawers/desktop-navigation-drawer.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Drawer } from '../../drawer/drawer.js';
+import { PanelNavigation } from '../../navigation/panel-navigation/panel-navigation.js';
+import styles from './desktop-navigation-drawer.module.css.js';
+
+function DesktopNavigationDrawer({ groupId, instanceId, linkGroup, onClosed, }) {
+    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: styles['desktop-navigation-drawer'], "data-test-selector": "desktopNavigationDrawer", groupId: groupId, instanceId: instanceId, onClosed: onClosed, position: "top", showUnder: "header", children: linkGroup && (jsx(PanelNavigation, { "data-test-selector": "desktopNavigationPanel", header: linkGroup, id: `panels-${linkGroup.key}`, linkItems: linkGroup.items }, linkGroup.key)) }));
+}
+
+export { DesktopNavigationDrawer };

package/dist/header/drawers/desktop-navigation-drawer.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"desktop-navigation-drawer":"desktop-navigation-drawer-module-rXWPO"};
+
+export { styles as default };

package/dist/header/drawers/mobile-navigation-drawer.d.ts

@@ -0,0 +1,7 @@
+import { NavigationLinkItem } from '../../shared/api/bff/model/bff.model';
+export interface MobileNavigationDrawerProps {
+    groupId?: string;
+    instanceId?: string;
+    linkItems: NavigationLinkItem[] | undefined;
+}
+export declare function MobileNavigationDrawer({ groupId, instanceId, linkItems, }: MobileNavigationDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/drawers/mobile-navigation-drawer.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Drawer } from '../../drawer/drawer.js';
+import { MobileNavigation } from '../../navigation/mobile-navigation/mobile-navigation.js';
+import styles from './mobile-navigation-drawer.module.css.js';
+
+function MobileNavigationDrawer({ groupId, instanceId, linkItems, }) {
+    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, className: styles['mobile-navigation-drawer'], "data-test-selector": "mobileNavigationDrawer", groupId: groupId, instanceId: instanceId, position: "left", showUnder: "announcement", children: ({ close, isOpen }) => (jsx(MobileNavigation, { id: "mobile-navigation", isActive: isOpen, linkItems: linkItems, onActiveChange: close })) }));
+}
+
+export { MobileNavigationDrawer };

package/dist/header/drawers/mobile-navigation-drawer.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"mobile-navigation-drawer":"mobile-navigation-drawer-module-XR23R"};
+
+export { styles as default };

package/dist/header/drawers/search-drawer.d.ts

@@ -0,0 +1,5 @@
+export interface SearchDrawerProps {
+    groupId?: string;
+    instanceId?: string;
+}
+export declare function SearchDrawer({ groupId, instanceId }: SearchDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/drawers/search-drawer.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Drawer } from '../../drawer/drawer.js';
+import { SearchRoot } from '../../global-search/global-search.js';
+
+function SearchDrawer({ groupId, instanceId }) {
+    return (jsx(Drawer, { allowCloseOnBackgroundClick: true, showBackgroundOverlay: true, "data-test-selector": "searchDrawer", groupId: groupId, instanceId: instanceId, position: "top", showUnder: "header", children: jsx(SearchRoot, {}) }));
+}
+
+export { SearchDrawer };

package/dist/header/header-layout/header-layout.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface HeaderLayoutProps {
+    hamburgerButton?: ReactNode;
+    hasDrawersOpen?: boolean;
+    logo: ReactNode;
+    mainNavigation: ReactNode;
+    navigationActions: ReactNode;
+    search: ReactNode;
+}
+export declare function HeaderLayout({ hamburgerButton, hasDrawersOpen, logo, mainNavigation, navigationActions, search, }: HeaderLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/header-layout/header-layout.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './header-layout.module.css.js';
+
+function HeaderLayout({ hamburgerButton, hasDrawersOpen, logo, mainNavigation, navigationActions, search, }) {
+    return (jsxs("div", { className: clsx(styles['header-layout'], hasDrawersOpen && styles['has-drawers-open']), children: [jsx("div", { className: styles['logo'], children: logo }), jsx("nav", { className: styles['navigation'], children: mainNavigation }), jsx("div", { className: styles['hamburger'], children: hamburgerButton && hamburgerButton }), jsx("div", { className: styles['search'], children: search }), jsx("nav", { className: styles['actions'], children: navigationActions })] }));
+}
+
+export { HeaderLayout };

package/dist/header/header-layout/header-layout.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"header-layout":"header-layout-module-uGT3X","logo":"header-layout-module-oKPyL","hamburger":"header-layout-module-biHA2","search":"header-layout-module-fP3a6","navigation":"header-layout-module-vVRTn","actions":"header-layout-module-Ux7Uj","has-drawers-open":"header-layout-module-1qdd6"};
+
+export { styles as default };

package/dist/header/header.d.ts

@@ -0,0 +1,7 @@
+import { NavigationSection } from '../shared/api/bff/model/bff.model';
+export interface HeaderProps {
+    className?: string;
+    headerNavigationSection?: NavigationSection;
+    sticky?: boolean;
+}
+export declare function Header({ className, headerNavigationSection, sticky, }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/header.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { useDrawer } from '../drawer/use-drawer.js';
+import { useGlobalSearchDisclosure } from '../global-search/global-search-provider/use-search-disclosure.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { isNavigationSection, isNavigationLinkItem } from '../shared/api/bff/model/bff.model.js';
+import { useIsBreakpoint } from '../shared/hooks/use-is-breakpoint.js';
+import { useResizeObserver } from '../shared/hooks/use-resize-observer.js';
+import { useOnNavigate } from '../shared/routing/use-on-navigate.js';
+import { usePaths } from '../shared/routing/use-paths.js';
+import { ConnectedAccountButton } from './buttons/account/connected-account-button.js';
+import { ConnectedCartButton } from './buttons/cart/connected-cart-button.js';
+import { ConnectedFavoritesButton } from './buttons/favorites/connected-favorites-button.js';
+import { HamburgerButton } from './buttons/hamburger/hamburger-button.js';
+import { SearchButton } from './buttons/search/search-button.js';
+import { DesktopNavigationDrawer } from './drawers/desktop-navigation-drawer.js';
+import { MobileNavigationDrawer } from './drawers/mobile-navigation-drawer.js';
+import { SearchDrawer } from './drawers/search-drawer.js';
+import { HeaderLayout } from './header-layout/header-layout.js';
+import { NavigationLinkList } from './link-list/navigation-link-list.js';
+import { SonicLogo } from './sonic-logo/sonic-logo.js';
+import styles from './header.module.css.js';
+
+function Header({ className, headerNavigationSection, sticky, }) {
+    const paths = usePaths();
+    const [activeLinkGroup, setActiveLinkGroup] = useState();
+    const t = useFormattedMessage();
+    const isXl = useIsBreakpoint('xl');
+    const { ref: headerRef } = useResizeObserver((_, size) => {
+        const height = size.height;
+        document?.documentElement.style.setProperty('--header-height', `${height}px`);
+    });
+    const { close: closeSearch, groupId: searchGroupId, instanceId: searchInstanceId, isOpen: searchOpen, setIsOpen: setSearchOpen, } = useGlobalSearchDisclosure();
+    const mobileNavigationDrawer = useDrawer({
+        groupId: 'drawers-header',
+        instanceId: 'mobileNavigationDrawer',
+    });
+    const mobileNavigationOpen = mobileNavigationDrawer.isOpen;
+    const setMobileNavigationOpen = mobileNavigationDrawer.setIsOpen;
+    const desktopNavigationDrawer = useDrawer({
+        groupId: 'drawers-header',
+        instanceId: 'desktopNavigationDrawer',
+    });
+    const setDesktopNavigationOpen = desktopNavigationDrawer.setIsOpen;
+    const desktopNavigationOpen = desktopNavigationDrawer.isOpen;
+    const toggleSearch = (isActive) => {
+        setSearchOpen(isActive);
+    };
+    const toggleMobileNavigation = (isActive) => {
+        setMobileNavigationOpen(isActive);
+    };
+    const toggleActiveSubmenu = (linkGroup) => {
+        if (linkGroup === activeLinkGroup)
+            setDesktopNavigationOpen(false);
+        else
+            setActiveLinkGroup(linkGroup);
+    };
+    const hasDrawersOpen = searchOpen || mobileNavigationOpen || desktopNavigationOpen;
+    useOnNavigate(() => {
+        closeSearch();
+        mobileNavigationDrawer.close();
+        desktopNavigationDrawer.close();
+    });
+    useEffect(() => {
+        if (activeLinkGroup)
+            setDesktopNavigationOpen(true);
+    }, [activeLinkGroup, setDesktopNavigationOpen]);
+    const mainNavigationSection = headerNavigationSection?.items
+        .filter(isNavigationSection)
+        .find(item => item.key === 'main-navigation');
+    return (jsxs(Fragment, { children: [jsx("header", { ref: headerRef, className: clsx(styles['header'], sticky && styles['sticky'], className), "data-test-selector": "pageHeader", children: jsx(HeaderLayout, { hamburgerButton: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", "data-test-selector": "pageHeaderHamburgerButton", isActive: mobileNavigationOpen, onActiveChange: toggleMobileNavigation }), hasDrawersOpen: hasDrawersOpen, logo: jsx(SonicLogo, { "data-test-selector": "pageHeaderLogo", href: "/", title: t('Home') }), mainNavigation: jsx(NavigationLinkList, { activeLink: activeLinkGroup, "data-test-selector": "pageHeaderMainNavigation", navigationSection: mainNavigationSection, onSubmenuToggle: toggleActiveSubmenu }), navigationActions: jsxs(Fragment, { children: [jsx(ConnectedAccountButton, { "data-test-selector": "pageHeaderAccountButton" }), jsx(ConnectedFavoritesButton, { "data-test-selector": "pageHeaderFavoritesButton", href: "abc" }), jsx(ConnectedCartButton, { "data-test-selector": "pageHeaderCartButton", href: paths.CART })] }), search: jsx(SearchButton, { "aria-controls": "global-search", "data-test-selector": "pageHeaderSearchButton", isActive: searchOpen, onActiveChange: toggleSearch }) }) }), jsx(SearchDrawer, { groupId: searchGroupId, instanceId: searchInstanceId }), !isXl && (jsx(MobileNavigationDrawer, { groupId: mobileNavigationDrawer.groupId, instanceId: mobileNavigationDrawer.instanceId, linkItems: mainNavigationSection?.items.filter(isNavigationLinkItem) })), isXl && (jsx(DesktopNavigationDrawer, { groupId: desktopNavigationDrawer.groupId, instanceId: desktopNavigationDrawer.instanceId, linkGroup: activeLinkGroup, onClosed: () => setActiveLinkGroup(undefined) }))] }));
+}
+
+export { Header };

package/dist/header/header.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"header":"header-module--VpOI","sticky":"header-module-Zh4pu"};
+
+export { styles as default };

package/dist/header/link-list/navigation-link-list.d.ts

@@ -0,0 +1,8 @@
+import { NavigationLinkGroup, NavigationLinkItem, NavigationSection } from '../../shared/api/bff/model/bff.model';
+export interface LinkListProps {
+    activeLink?: NavigationLinkItem;
+    'data-test-selector'?: string;
+    navigationSection: NavigationSection | undefined;
+    onSubmenuToggle: (linkGroup: NavigationLinkGroup) => void;
+}
+export declare function NavigationLinkList({ activeLink, 'data-test-selector': dataTestSelector, navigationSection, onSubmenuToggle, }: LinkListProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/link-list/navigation-link-list.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Link } from '../../buttons/link/link.js';
+import { Icon } from '../../icon/icon.js';
+import { logger } from '../../logging/logger.js';
+import { isNavigationLinkGroup, isNavigationLink } from '../../shared/api/bff/model/bff.model.js';
+import styles from './navigation-link-list.module.css.js';
+
+function NavigationLinkList({ activeLink, 'data-test-selector': dataTestSelector, navigationSection, onSubmenuToggle, }) {
+    const items = navigationSection?.items ?? [];
+    return (jsx("ul", { className: styles['navigation-link-list'], "data-test-selector": dataTestSelector, children: items.map(item => {
+            if (isNavigationLinkGroup(item)) {
+                if (item.items.length > 0) {
+                    return (jsx("li", { className: activeLink === item ? styles['active'] : undefined, children: jsxs(Link, { "aria-controls": `panels-${item.key}`, "aria-expanded": activeLink === item, className: styles.link, "data-test-selector": `navigationLink-${item.key}`, onClick: () => onSubmenuToggle(item), target: item.openInNewTab ? '_blank' : undefined, children: [item.label, jsx(Icon, { className: styles.icon, name: "ArrowDownBold", size: "xxs" })] }) }, item.key));
+                }
+                else {
+                    logger.warn(`Link-group has no items: ${JSON.stringify(item, null, 2)}`);
+                    return null;
+                }
+            }
+            else if (isNavigationLink(item)) {
+                return (jsx("li", { children: jsx(Link, { className: styles.link, href: item.href, children: item.label }) }, item.key));
+            }
+            else {
+                logger.warn(`Unsupported link type: ${JSON.stringify(item, null, 2)}`);
+                return null;
+            }
+        }) }));
+}
+
+export { NavigationLinkList };

package/dist/header/link-list/navigation-link-list.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"navigation-link-list":"navigation-link-list-module-Ku9Sa","link":"navigation-link-list-module-kj0Rj","icon":"navigation-link-list-module-jcogX","active":"navigation-link-list-module-jDgf0"};
+
+export { styles as default };

package/dist/header/sonic-logo/sonic-logo.d.ts

@@ -0,0 +1,7 @@
+export interface SonicLogoProps {
+    className?: string;
+    'data-test-selector'?: string;
+    href?: string;
+    title?: string;
+}
+export declare function SonicLogo({ className, 'data-test-selector': dataTestSelector, href, title, }: SonicLogoProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/sonic-logo/sonic-logo.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Link } from '../../buttons/link/link.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import styles from './sonic-logo.module.css.js';
+
+function SonicLogoSVG() {
+    const t = useFormattedMessage();
+    return (jsx("svg", { "aria-label": t('Sonic Equipment'), className: styles['logo'], viewBox: "0 0 100 24", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { className: styles.letters, d: "M11.87 8.65c1.815 0 3.286 1.482 3.286 3.311 0 6.595-5.325 11.962-11.87 11.962C1.471 23.923 0 22.44 0 20.612c0-1.766 1.372-3.21 3.1-3.307l.186-.005c2.848 0 5.179-2.277 5.293-5.12l.005-.219c0-1.829 1.471-3.311 3.286-3.311zm0-8.65c1.815 0 3.286 1.483 3.286 3.311 0 1.766-1.371 3.21-3.1 3.307l-.186.005c-2.849 0-5.178 2.277-5.293 5.118l-.004.22c0 1.829-1.472 3.311-3.287 3.311C1.472 15.272 0 13.79 0 11.961 0 5.366 5.325 0 11.87 0zm6.155 12.016c0 6.596 5.325 11.963 11.87 11.963 6.545 0 11.87-5.367 11.87-11.963 0-6.595-5.325-11.96-11.87-11.96-6.545 0-11.87 5.365-11.87 11.96zm6.572 0c0-2.943 2.376-5.338 5.298-5.338 2.92 0 5.297 2.395 5.297 5.338 0 2.945-2.376 5.34-5.297 5.34-2.922 0-5.298-2.395-5.298-5.34zM82.251 3.56c-4.628 4.663-4.628 12.251 0 16.915 4.628 4.663 12.158 4.663 16.786 0a3.33 3.33 0 0 0 .001-4.683 3.268 3.268 0 0 0-4.501-.138l-.146.138a5.278 5.278 0 0 1-7.494 0c-2.064-2.081-2.064-5.468.001-7.549a5.275 5.275 0 0 1 7.313-.174l.18.173a3.268 3.268 0 0 0 4.647 0 3.33 3.33 0 0 0 0-4.684c-4.63-4.663-12.16-4.662-16.787.002zm-12.868-.13v17.148c0 1.828 1.47 3.311 3.285 3.311 1.816 0 3.287-1.483 3.287-3.311V3.429c0-1.829-1.471-3.312-3.287-3.312-1.815 0-3.285 1.483-3.285 3.312zM48.063.075c-1.814 0-3.285 1.483-3.285 3.311V20.69c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311V6.698h2.95c2.92 0 5.297 2.394 5.297 5.338v8.653c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311v-8.653C66.17 5.44 60.844.075 54.3.075h-6.235z" }), jsx("path", { className: styles.dot, d: "M35.27 12.017c0 2.991-2.406 5.416-5.375 5.416-2.97 0-5.376-2.425-5.376-5.416 0-2.992 2.407-5.417 5.376-5.417 2.969 0 5.375 2.425 5.375 5.417" })] }) }));
+}
+function SonicLogo({ className, 'data-test-selector': dataTestSelector, href, title, }) {
+    if (href)
+        return (jsx(Link, { className: clsx(styles['sonic-logo'], className), "data-test-selector": dataTestSelector, href: href, title: title, children: jsx(SonicLogoSVG, {}) }));
+    return (jsx("div", { className: clsx(styles['sonic-logo'], className), "data-test-selector": dataTestSelector, children: jsx(SonicLogoSVG, {}) }));
+}
+
+export { SonicLogo };

package/dist/header/sonic-logo/sonic-logo.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"sonic-logo":"sonic-logo-module-9Mpdq","logo":"sonic-logo-module-PfC3z","letters":"sonic-logo-module-Pa7pF","dot":"sonic-logo-module-vTCO3"};
+
+export { styles as default };

package/dist/icon/icon.d.ts

@@ -0,0 +1,10 @@
+import { IconName } from '../icons';
+export type IconSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+export interface IconProps {
+    className?: string;
+    'data-test-selector'?: string;
+    label?: string;
+    name: IconName;
+    size?: IconSize;
+}
+export declare function Icon({ className, 'data-test-selector': dataTestSelector, label, name, size, }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/icon/icon.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { icons } from '../icons/index.js';
+import styles from './icon.module.css.js';
+
+function Icon({ className, 'data-test-selector': dataTestSelector, label, name, size = 'md', }) {
+    const Icon = icons[name];
+    return (jsx(Icon, { "aria-label": label, className: clsx(styles['icon'], clsx(styles[`size-${size}`], className)), "data-test-selector": dataTestSelector, role: label ? undefined : 'presentation' }));
+}
+
+export { Icon };

package/dist/icon/icon.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"icon":"icon-module-H50Sa","size-xxs":"icon-module-VRfRB","size-xs":"icon-module-qOoul","size-sm":"icon-module-s7OuZ","size-lg":"icon-module-Z76Ae"};
+
+export { styles as default };

package/dist/icons/glyph/glyphs-arrow-boldcaps-left-icon.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function GlyphsArrowBoldCapsLeftIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "11", viewBox: "0 0 11 11", width: "11", children: jsx("path", { d: "M2.31124163,11 C2.06716529,11 1.91839241,10.7730596 2.04771379,10.5980857 L6.08820761,5.13116556 C6.42092595,4.68081431 6.37243043,4.10595375 5.96732409,3.70073526 L2.70240329,0.432177991 C2.53178078,0.261409485 2.67540212,0 2.93972934,0 L5.48361239,0 C5.57518542,0 5.6619622,0.0340936243 5.72102726,0.0931942463 L8.14882304,2.52367916 C9.1607451,3.53657521 9.28198389,4.9729381 8.45036569,6.09787751 L4.91836426,10.876542 C4.86160851,10.9533653 4.7620417,11 4.65492523,11 L2.31124163,11 Z", fillRule: "evenodd", transform: "matrix(-1 0 0 1 11 0)" }) }));
+}
+
+export { GlyphsArrowBoldCapsLeftIcon };

package/dist/icons/glyph/glyphs-arrow-boldcaps-right-icon.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function GlyphsArrowBoldCapsRightIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "11", viewBox: "0 0 11 11", width: "11", children: jsx("path", { d: "M2.31124163,11 C2.06716529,11 1.91839241,10.7730596 2.04771379,10.5980857 L6.08820761,5.13116556 C6.42092595,4.68081431 6.37243043,4.10595375 5.96732409,3.70073526 L2.70240329,0.432177991 C2.53178078,0.261409485 2.67540212,0 2.93972934,0 L5.48361239,0 C5.57518542,0 5.6619622,0.0340936243 5.72102726,0.0931942463 L8.14882304,2.52367916 C9.1607451,3.53657521 9.28198389,4.9729381 8.45036569,6.09787751 L4.91836426,10.876542 C4.86160851,10.9533653 4.7620417,11 4.65492523,11 L2.31124163,11 Z", fillRule: "evenodd" }) }));
+}
+
+export { GlyphsArrowBoldCapsRightIcon };

package/dist/icons/glyph/glyphs-chevrons-bold-down-icon.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function GlyphsChevronsBoldDownIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "12", viewBox: "0 0 12 12", width: "12", children: jsx("path", { d: "M5.98800959,10 L1,4.97931034 C1.17585931,4.65747126 1.4636291,4.2954023 1.86330935,3.89310345 C2.03916867,3.71609195 2.21502798,3.55517241 2.39088729,3.41034483 C2.5667466,3.26551724 2.70263789,3.16896552 2.79856115,3.12068966 L2.94244604,3.02413793 L5.98800959,6.08965517 L9.05755396,3 C9.39328537,3.19310345 9.7529976,3.48275862 10.1366906,3.86896552 C10.31255,4.04597701 10.4724221,4.22298851 10.616307,4.4 L10.8321343,4.67517241 C10.8705036,4.72666667 10.902478,4.77172414 10.9280576,4.81034483 L11,4.95517241 L5.98800959,10 Z", fillRule: "evenodd" }) }));
+}
+
+export { GlyphsChevronsBoldDownIcon };

package/dist/icons/glyph/glyphs-chevrons-bold-left-icon.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function GlyphsChevronsBoldLeftIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "12", viewBox: "0 0 12 12", width: "12", children: jsx("path", { d: "M2,5.98800959 L7.02068966,1 C7.34252874,1.17585931 7.7045977,1.4636291 8.10689655,1.86330935 C8.28390805,2.03916867 8.44482759,2.21502798 8.58965517,2.39088729 L8.74027586,2.58273381 C8.804,2.66906475 8.85034483,2.74100719 8.87931034,2.79856115 L8.97586207,2.94244604 L5.91034483,5.98800959 L9,9.05755396 C8.80689655,9.39328537 8.51724138,9.7529976 8.13103448,10.1366906 C7.95402299,10.31255 7.77701149,10.4724221 7.6,10.616307 L7.32482759,10.8321343 L7.18965517,10.9280576 L7.04482759,11 L2,5.98800959 Z", fillRule: "evenodd" }) }));
+}
+
+export { GlyphsChevronsBoldLeftIcon };

package/dist/icons/glyph/glyphs-chevrons-bold-right-icon.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function GlyphsChevronsBoldRightIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "12", viewBox: "0 0 12 12", width: "12", children: jsx("path", { d: "M10,5.98800959 L4.97931034,1 C4.65747126,1.17585931 4.2954023,1.4636291 3.89310345,1.86330935 C3.71609195,2.03916867 3.55517241,2.21502798 3.41034483,2.39088729 L3.25972414,2.58273381 C3.196,2.66906475 3.14965517,2.74100719 3.12068966,2.79856115 L3.02413793,2.94244604 L6.08965517,5.98800959 L3,9.05755396 C3.19310345,9.39328537 3.48275862,9.7529976 3.86896552,10.1366906 C4.04597701,10.31255 4.22298851,10.4724221 4.4,10.616307 L4.67517241,10.8321343 L4.81034483,10.9280576 L4.95517241,11 L10,5.98800959 Z", fillRule: "evenodd" }) }));
+}
+
+export { GlyphsChevronsBoldRightIcon };

package/dist/icons/glyph/glyphs-chevrons-bold-up-icon.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function GlyphsChevronsBoldUpIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "12", viewBox: "0 0 12 12", width: "12", children: jsx("path", { d: "M5.98800959,2 L1,7.02068966 C1.17585931,7.34252874 1.4636291,7.7045977 1.86330935,8.10689655 C2.03916867,8.28390805 2.21502798,8.44482759 2.39088729,8.58965517 L2.58273381,8.74027586 C2.66906475,8.804 2.74100719,8.85034483 2.79856115,8.87931034 L2.94244604,8.97586207 L5.98800959,5.91034483 L9.05755396,9 C9.39328537,8.80689655 9.7529976,8.51724138 10.1366906,8.13103448 C10.31255,7.95402299 10.4724221,7.77701149 10.616307,7.6 L10.8321343,7.32482759 L10.9280576,7.18965517 L11,7.04482759 L5.98800959,2 Z", fillRule: "evenodd" }) }));
+}
+
+export { GlyphsChevronsBoldUpIcon };

package/dist/icons/glyph/glyphs-chevrons-slim-down-icon.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function GlyphsChevronsSlimDownIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "12", viewBox: "0 0 12 12", width: "12", children: jsx("path", { d: "M6,9 L1,4.06645029 C1.08169007,3.87890406 1.19817561,3.69487412 1.34945663,3.51436046 C1.50073764,3.3338468 1.68216803,3.16239331 1.89374779,3 L5.98800959,7.08347812 L9.9960307,3 C10.2121071,3.16649238 10.4031847,3.33794587 10.5692635,3.51436046 C10.7353424,3.69077505 10.8789212,3.87480499 11,4.06645029 L6,9 Z", fillRule: "evenodd" }) }));
+}
+
+export { GlyphsChevronsSlimDownIcon };