@hlf-fe/pulmo-ui 1.5.1 → 1.5.3

package/dist/components/modules/navigation/navigation-mobile/navigation-mobile.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Link } from 'gatsby';
+import NavigationPanel from './nav-panel';
+import { Image } from '../../../../components/layout/image/image';
+import { Button } from '../../../../components/buttons/button/button';
+import { HamburgerIcon } from '../../../../components/icons/hamburger-icon/hamburger-icon';
+import { MenuCloseIcon } from '../../../../components/icons/menu-close-icon/menu-close-icon';
+import styled, { css } from 'styled-components';
+import { rem } from '../../../../styles/units';
+export const NavigationMobile = ({ logotype, mainMenuItems, topMenuItems, ctaButton, localeText = {
+    ariaLabelHome: "",
+    goBack: ""
+}, }) => {
+    const { ariaLabelHome, goBack } = localeText;
+    const [isOpen, setIsOpen] = useState(false);
+    const stickyRef = useRef(null);
+    useEffect(() => {
+        document.body.style.overflow = isOpen ? 'hidden' : '';
+    }, [isOpen]);
+    // On Unmount, cleanup
+    useEffect(() => {
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, []);
+    const scrollToTop = () => {
+        stickyRef.current?.scroll({ top: 0, behavior: 'smooth' });
+    };
+    return (_jsx(Wrapper, { children: _jsxs(StickyContainer, { "$expanded": isOpen, ref: stickyRef, children: [_jsxs(TopBar, { children: [logotype && (_jsx(StyledLogoLink, { "data-test": "nav-logo", to: '/', "aria-label": ariaLabelHome, children: _jsx(Image, { image: logotype?.asset, width: "112", height: "28" }) })), ctaButton && (_jsx(StyledButton, { btnSize: "s", dataTest: "nav-cta", to: ctaButton.externalUrl, href: ctaButton.internalLink?.slug?.current, target: '_blank', children: ctaButton.webUrlName })), _jsx(MenuToggle, { "data-test": !isOpen ? 'nav-menu-closed' : 'nav-menu-open', "aria-label": "Meny", onClick: () => setIsOpen(!isOpen), children: _jsx(IconWrapper, { children: !isOpen ? _jsx(HamburgerIcon, {}) : _jsx(MenuCloseIcon, {}) }) })] }), isOpen && (_jsx(MenuContent, { children: _jsx(NavigationPanel, { mainMenuItems: mainMenuItems, topMenuItems: topMenuItems, scrollToTop: scrollToTop, closeMenu: () => setIsOpen(false), goBackText: goBack }) }))] }) }));
+};
+const Wrapper = styled.nav `
+  position: relative;
+  height: ${({ theme }) => rem(theme?.mobileNavHeight)};
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  z-index: 10;
+
+  a {
+    text-decoration: none;
+  }
+`;
+const StickyContainer = styled.div `
+  position: fixed;
+  width: 100%;
+  background: white;
+  overflow: hidden;
+  overflow-y: scroll;
+
+  ${({ $expanded }) => $expanded &&
+    css `
+      height: 100%;
+    `};
+`;
+const TopBar = styled.div `
+  height: ${({ theme }) => rem(theme?.mobileNavHeight)};
+  display: flex;
+  align-items: center;
+  padding: 0;
+  padding-left: ${rem(16)};
+`;
+const StyledLogoLink = styled(Link) `
+  display: flex;
+  align-self: center;
+
+  img {
+    height: ${rem(28)};
+  }
+`;
+const StyledButton = styled(Button) `
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  height: ${rem(32)};
+  padding: 0 ${rem(8)};
+`;
+const MenuToggle = styled.button `
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin: 0;
+  padding: 0 ${rem(16)};
+  border: none;
+  background: none;
+  cursor: pointer;
+`;
+const IconWrapper = styled.div `
+  display: flex;
+  width: ${rem(30)};
+  justify-content: center;
+`;
+const MenuContent = styled.div `
+  width: 100%;
+  border-top: 1px solid #ddd;
+  -webkit-tap-highlight-color: transparent;
+`;

package/dist/components/modules/navigation/navigation-mobile/navigation-mobile.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NavigationMobile } from "./navigation-mobile";
+declare const meta: Meta<typeof NavigationMobile>;
+export default meta;
+type Story = StoryObj<typeof NavigationMobile>;
+export declare const Default: Story;

package/dist/components/modules/navigation/navigation-mobile/navigation-mobile.stories.js

@@ -0,0 +1,12 @@
+import { NavigationMobile } from "./navigation-mobile";
+import { mockNavigation } from '../../../../mocks/navigation-mock';
+const meta = {
+    title: "Modules/Main Navigation (Mobile)",
+    component: NavigationMobile,
+};
+export default meta;
+export const Default = {
+    args: {
+        ...mockNavigation
+    }
+};

package/dist/components/modules/navigation/shared/nav-item/nav-item.d.ts

@@ -0,0 +1,18 @@
+import { WebPageUrl } from '../../../../../models/web-page-url';
+export type NavigationItemProps = {
+    model: NavigationItemModel;
+    expanded?: boolean;
+    parent?: string;
+    onToggle: (model: NavigationItemModel) => void;
+    onLinkClick?: () => void;
+};
+export type NavigationItemModel = {
+    key: string;
+    title: string;
+    highlight?: boolean;
+    slug?: {
+        current: string;
+    };
+    items?: WebPageUrl[];
+};
+export declare const NavigationItem: ({ model, expanded, onToggle, onLinkClick }: NavigationItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/modules/navigation/shared/nav-item/nav-item.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from "gatsby";
+import styled, { css } from "styled-components";
+import { media } from "../../../../../styles/mixins";
+import { rem } from "../../../../../styles/units";
+import { ToggableChevron } from "../../../../../components/icons/toggable-chevron/toggable-chevron";
+import { HeartIcon } from "../../../../../components/icons/heart-icon/heart-icon";
+export const NavigationItem = ({ model, expanded, onToggle, onLinkClick }) => {
+    const { highlight, title, items, slug } = model;
+    return (_jsxs(Wrapper, { "data-test": "nav-item", children: [slug ? (_jsxs(HeaderLink, { to: slug.current, onClick: () => {
+                    onLinkClick?.();
+                }, children: [_jsx(Title, { active: highlight, children: title }), highlight && (_jsx(IconWrapper, { children: _jsx(HeartIcon, {}) }))] })) : (_jsxs(HeaderButton, { onClick: () => {
+                    onToggle(model);
+                }, children: [_jsx(Title, { children: title }), _jsx(StyledToggle, { toggled: expanded, disableCircle: false })] })), (!slug && items) && (_jsx(Expandable, { "data-test": "nav-item-list", active: expanded, children: items.map(({ webUrlName, internalLink }) => (_jsx(StyledListItem, { children: _jsx(StyledLink, { tabIndex: !expanded ? -1 : 0, to: internalLink?.slug?.current ?? "", onClick: () => {
+                            onLinkClick?.();
+                        }, children: webUrlName }) }, webUrlName))) }))] }));
+};
+const Wrapper = styled.li `
+  display: flex;
+  flex-direction: column;
+  margin-top: ${rem(16)};
+`;
+const HeaderButton = styled.button `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  padding: 0;
+  border: 0;
+  background: none;
+`;
+const HeaderLink = styled(Link) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  text-decoration: none; 
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+const Title = styled.p `
+  font-size: ${rem(16)};
+  margin: 0;
+  margin-right: ${rem(8)};
+  text-align: left;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `};
+
+  ${({ active }) => active && css `
+    color: ${({ theme }) => theme.red};
+  `};
+
+  ${media.L `
+    font-size: ${rem(18)};
+    margin-right: ${rem(6)};
+  `}
+`;
+const IconWrapper = styled.div `
+  display: flex;
+
+  ${media.L `
+    margin-right: ${rem(20)};
+  `}
+`;
+const StyledToggle = styled(ToggableChevron) `
+  margin-left: auto;
+
+  ${media.L `
+    margin-right: ${rem(20)};
+  `}
+`;
+const Expandable = styled.ul `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  display: none;
+
+  ${({ active }) => active && css `
+    display: block;
+  `};
+`;
+const StyledListItem = styled.li `
+  margin-top: ${rem(16)};
+  margin-left: ${rem(8)};
+`;
+const StyledLink = styled(Link) `
+  font-size: ${rem(16)};
+  text-decoration: none;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueRegular};
+    
+    ${media.L `
+      font-family: ${theme.valueMedium};
+    `}
+  `};
+`;

package/dist/components/modules/navigation/shared/types/types.d.ts

@@ -0,0 +1,43 @@
+import { WebPageUrl } from '../../../../../models/web-page-url';
+import { SanityImage } from '../../../../../models/sanity-types';
+import { RefObject } from "react";
+export type NavigationItemModel = {
+    key: string;
+    title: string;
+    highlight?: boolean;
+    slug?: {
+        current: string;
+    };
+    items?: any;
+};
+export type NavigationSectionModel = {
+    key: string;
+    title: string;
+    column1Title?: string;
+    column1Items?: NavigationItemModel[];
+    column2Title?: string;
+    column2Items?: NavigationItemModel[];
+    backgroundColor?: {
+        hex: string;
+    };
+    linkBanners: LinkBanner[];
+};
+export type LinkBanner = {
+    title: string;
+    text: string;
+    image?: SanityImage;
+    link?: WebPageUrl;
+};
+export type NavigationModel = {
+    topMenuItems?: WebPageUrl[];
+    mainMenuItems?: NavigationSectionModel[];
+    logotype?: SanityImage;
+    ctaButton?: WebPageUrl;
+    __typename: string;
+    localeText?: {
+        ariaLabelHome?: string;
+        goBack?: string;
+    };
+    isMenuVisible?: boolean;
+    menuRef?: RefObject<HTMLElement>;
+};

package/dist/components/modules/navigation/shared/types/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modules/navigation/types.d.ts

@@ -0,0 +1,39 @@
+import { WebPageUrl } from '../../../models/web-page-url';
+import { SanityImage } from '../../../models/sanity-types';
+export type NavigationItemModel = {
+    key: string;
+    title: string;
+    highlight?: boolean;
+    link?: WebPageUrl;
+    items?: any;
+};
+export type NavigationSectionModel = {
+    key: string;
+    title: string;
+    column1Title?: string;
+    column1Items?: NavigationItemModel[];
+    column2Title?: string;
+    column2Items?: NavigationItemModel[];
+    backgroundColor?: {
+        hex: string;
+    };
+    linkBanners: LinkBanner[];
+};
+export type LinkBanner = {
+    title: string;
+    text: string;
+    image?: SanityImage;
+    link?: WebPageUrl;
+};
+export type NavigationModel = {
+    topMenuItems?: WebPageUrl[];
+    mainMenuItems?: NavigationSectionModel[];
+    logotype?: SanityImage;
+    ctaButton?: WebPageUrl;
+    __typename: string;
+    localeText?: {
+        ariaLabelHome?: string;
+        goBack?: string;
+    };
+    isMenuVisible?: boolean;
+};

package/dist/components/modules/navigation/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/navigation/nav-cell/nav-cell.d.ts

@@ -3,4 +3,4 @@ export type NavigationCellProps = {
     active?: boolean;
     onToggleCell: () => void;
 };
-export declare const NavigationCell: ({ title, active, onToggleCell }: NavigationCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavigationCell: ({ title, active, onToggleCell, }: NavigationCellProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/nav-cell/nav-cell.js

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 import { media } from "../../../styles/mixins";
 import { rem } from "../../../styles/units";
 import { ToggableChevron } from "../../../components/icons/toggable-chevron/toggable-chevron";
-export const NavigationCell = ({ title, active, onToggleCell }) => (_jsx(StyledListItem, { children: _jsxs(NavCell, { "data-test": "nav-cell", active: active, onClick: onToggleCell, children: [title, _jsx(StyledToggle, { toggled: active })] }) }));
+export const NavigationCell = ({ title, active, onToggleCell, }) => (_jsx(StyledListItem, { children: _jsxs(NavCell, { "data-test": "nav-cell", "$active": active, onClick: onToggleCell, children: [title, _jsx(StyledToggle, { toggled: active })] }) }));
 const StyledListItem = styled.li `
   display: inline-block;
   height: 100%;
@@ -45,12 +45,13 @@ const NavCell = styled.button `
     font-family: ${theme.valueBold};
   `};
 
-  ${({ active }) => active && css `
-    ${({ theme }) => css `
-      color: ${theme.red};
-      box-shadow: inset 0 -4px 0 ${theme.red};
+  ${({ $active }) => $active &&
+    css `
+      ${({ theme }) => css `
+        color: ${theme.red};
+        box-shadow: inset 0 -4px 0 ${theme.red};
+      `};
     `};
-  `};
 `;
 const StyledToggle = styled(ToggableChevron).attrs({
     disableCircle: true,
@@ -58,10 +59,11 @@ const StyledToggle = styled(ToggableChevron).attrs({
   margin-left: ${rem(4)};
 
   svg {
-    ${(props) => props.toggled && css `
-      ${({ theme }) => css `
-        fill: ${theme.red};
+    ${(props) => props.toggled &&
+    css `
+        ${({ theme }) => css `
+          fill: ${theme.red};
+        `};
       `};
-    `};
   }
 `;

package/dist/components/navigation/pagination/pagination.js

@@ -41,7 +41,7 @@ export const Pagination = ({ numberOfPages, currentPage, isMobile = true, locale
             total - 1,
         ];
     };
-    return (numberOfPages > 0 && (_jsxs(StyledList, { children: [_jsx(StyleListItem, { children: _jsx(PaginationArrow, { isDisabled: isFirstPage, "aria-label": prePage, onClick: (e) => goToPage(e, pageIndex - 1), children: _jsx(ChevronLeftIcon, { width: 12, height: 12, color: isFirstPage ? COLORS.grayDark : COLORS.blackLight }) }) }), getVisiblePages(pageIndex, numberOfPages, isMobile).map((page, index) => (_jsx(StyleListItem, { children: page === "..." ? (_jsx(Ellipsis, { children: "\u2026" })) : (_jsx(PaginationItem, { isSelected: pageIndex === page, onClick: (e) => goToPage(e, page), children: page + 1 })) }, index))), _jsx(StyleListItem, { children: _jsx(PaginationArrow, { isDisabled: isLastPage, "aria-label": nextPage, onClick: (e) => goToPage(e, pageIndex + 1), children: _jsx(ChevronRightIcon, { width: 12, height: 12, color: isLastPage ? COLORS.grayDark : COLORS.blackLight }) }) })] })));
+    return (numberOfPages > 0 && (_jsxs(StyledList, { children: [_jsx(StyleListItem, { children: _jsx(PaginationArrow, { "$isDisabled": isFirstPage, "aria-label": prePage, onClick: (e) => goToPage(e, pageIndex - 1), children: _jsx(ChevronLeftIcon, { width: 12, height: 12, color: isFirstPage ? COLORS.grayDark : COLORS.blackLight }) }) }), getVisiblePages(pageIndex, numberOfPages, isMobile).map((page, index) => (_jsx(StyleListItem, { children: page === "..." ? (_jsx(Ellipsis, { children: "\u2026" })) : (_jsx(PaginationItem, { "$isSelected": pageIndex === page, onClick: (e) => goToPage(e, page), children: page + 1 })) }, index))), _jsx(StyleListItem, { children: _jsx(PaginationArrow, { "$isDisabled": isLastPage, "aria-label": nextPage, onClick: (e) => goToPage(e, pageIndex + 1), children: _jsx(ChevronRightIcon, { width: 12, height: 12, color: isLastPage ? COLORS.grayDark : COLORS.blackLight }) }) })] })));
 };
 const StyledList = styled.ul `
   margin: 0 auto;
@@ -77,7 +77,7 @@ const PaginationItem = styled.button `
     border: ${rem(1)} solid ${theme.blackLight};
   `};
 
-  ${({ theme, isSelected }) => isSelected &&
+  ${({ theme, $isSelected }) => $isSelected &&
     css `
       background-color: ${theme.blackLight};
       border-color: transparent;
@@ -95,7 +95,7 @@ const PaginationArrow = styled.button `
   border-radius: ${rem(5)};
   background-color: ${({ theme }) => theme.white};
 
-  ${({ isDisabled }) => isDisabled &&
+  ${({ $isDisabled }) => $isDisabled &&
     css `
       pointer-events: none;
       cursor: default;

package/dist/components/surfaces/paper/paper.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { themeColors, themeBorderRadius, themeElevation, } from "../../../styles/mixins/theme-mixins";
 export const Paper = ({ className, children, backgroundColor = "white", borderRadius = "md", elevation = backgroundColor === "#ffffff" ? 1 : 0, }) => {
-    return (_jsx(Container, { className: className, backgroundColor: backgroundColor, borderRadius: borderRadius, elevation: elevation, children: children }));
+    return (_jsx(Container, { className: className, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, "$elevation": elevation, children: children }));
 };
 const Container = styled.div `
-  background-color: ${({ backgroundColor }) => themeColors(backgroundColor)};
-  border-radius: ${({ borderRadius }) => themeBorderRadius(borderRadius)};
-  box-shadow: ${({ elevation }) => themeElevation(elevation)};
+  background-color: ${({ $backgroundColor }) => themeColors($backgroundColor)};
+  border-radius: ${({ $borderRadius }) => themeBorderRadius($borderRadius)};
+  box-shadow: ${({ $elevation }) => themeElevation($elevation)};
 `;

package/dist/hoc/withDefaultTheme.d.ts

@@ -1 +1,3 @@
-export declare const withDefaultTheme: <T extends object>(Component: React.ComponentType<T>) => React.FC<T>;
+import React from "react";
+export declare function withDefaultTheme<P>(Component: React.ComponentType<P>): React.FC<P>;
+export declare function withDefaultThemeWithRef<P>(Component: React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>;

package/dist/hoc/withDefaultTheme.js

@@ -1,8 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { THEME_SETTINGS } from "../styles/theme";
+import { useContext, forwardRef } from "react";
 import { ThemeContext, ThemeProvider } from "styled-components";
-export const withDefaultTheme = (Component) => (props) => {
-    const theme = useContext(ThemeContext);
-    return theme ? (_jsx(Component, { ...props })) : (_jsx(ThemeProvider, { theme: THEME_SETTINGS, children: _jsx(Component, { ...props }) }));
-};
+import { THEME_SETTINGS } from "../styles/theme";
+export function withDefaultTheme(Component) {
+    const ComponentWithTheme = (props) => {
+        const theme = useContext(ThemeContext);
+        return theme ? (_jsx(Component, { ...props })) : (_jsx(ThemeProvider, { theme: THEME_SETTINGS, children: _jsx(Component, { ...props }) }));
+    };
+    return ComponentWithTheme;
+}
+export function withDefaultThemeWithRef(Component) {
+    const ComponentWithTheme = forwardRef((props, ref) => {
+        const theme = useContext(ThemeContext);
+        return theme ? (_jsx(Component, { ...props, ref: ref })) : (_jsx(ThemeProvider, { theme: THEME_SETTINGS, children: _jsx(Component, { ...props, ref: ref }) }));
+    });
+    return ComponentWithTheme;
+}

package/dist/index.d.ts

@@ -13,14 +13,13 @@ import { type EntryListProps, type EntryListItemProps, type EntryListHeadingProp
 import { type DropdownProps } from "./components/inputs/dropdown/dropdown";
 import { type PaginationProps } from "./components/navigation/pagination/pagination";
 import { type AccordionItemProps } from "./components/layout/accordion/accordion";
-import { type NavigationCellProps } from "./components/navigation/nav-cell/nav-cell";
-import { type NavigationItemProps } from "./components/navigation/nav-item/nav-item";
 import { type CardBannerProps } from "./components/surfaces/cards/card-banner/card-banner";
 import { type PaperProps } from "./components/surfaces/paper/paper";
 import { type LinkProps } from "./components/typography/link/link";
 import { PortableTextComponentDefault } from "./components/typography/portable-text/portable-text-component-default";
 import { type FooterProps } from "./components/modules/footer/footer";
-export type { ButtonProps, LoadingButtonProps, TextButtonProps, EmailSignupFormProps, ImageProps, ContainerProps, AlertProps, EntryListHeadingProps, EntryListTextProps, PaginationProps, NavigationCellProps, NavigationItemProps, CardBannerProps, PaperProps, };
+import { type LogoListProps } from "./components/modules/logo-list/logo-list";
+export type { ButtonProps, LoadingButtonProps, TextButtonProps, EmailSignupFormProps, ImageProps, ContainerProps, AlertProps, EntryListHeadingProps, EntryListTextProps, PaginationProps, CardBannerProps, PaperProps, };
 export { CloseIcon } from "./components/icons/close-icon/close-icon";
 export { ExclamationMarkIcon } from "./components/icons/exclamation-mark-icon/exclamation-mark-icon";
 export { WarningIcon } from "./components/icons/warning-icon/warning-icon";
@@ -39,7 +38,14 @@ export declare const FormLabel: import("react").FC<FormLabelProps>;
 export declare const TextField: import("react").FC<TextFieldProps>;
 export declare const EmailSignupForm: import("react").FC<EmailSignupFormProps>;
 export declare const Image: import("react").FC<ImageProps>;
-export declare const Container: import("react").FC<ContainerProps>;
+export declare const Container: import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+    maxWidth?: "sm" | "lg" | "xl";
+    className?: string;
+} & {
+    position?: import("csstype").Property.Position | undefined;
+    display?: import("csstype").Property.Display | undefined;
+} & import("react").RefAttributes<any>>;
 export declare const EntryList: import("react").FC<EntryListProps>;
 export declare const EntryListItem: import("react").FC<EntryListItemProps>;
 export declare const EntryListText: import("react").FC<EntryListTextProps>;
@@ -50,8 +56,6 @@ export declare const Accordion: import("react").FC<import("styled-components/dis
     disabled?: boolean;
 }>>;
 export declare const AccordionItem: import("react").FC<AccordionItemProps>;
-export declare const NavigationCell: import("react").FC<NavigationCellProps>;
-export declare const NavigationItem: import("react").FC<NavigationItemProps>;
 export declare const CardBanner: import("react").FC<CardBannerProps>;
 export declare const Paper: import("react").FC<PaperProps>;
 export declare const Link: import("react").FC<LinkProps>;
@@ -66,4 +70,7 @@ export declare const ItalicText: import("react").FC<import("styled-components").
 export declare const OrderedList: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>>;
 export declare const UnorderedList: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>;
 export declare const Footer: import("react").FC<FooterProps>;
+export declare const LogoList: import("react").FC<LogoListProps>;
+export declare const NavigationDesktop: import("react").FC<import("./components/modules/navigation/shared/types/types").NavigationModel>;
+export declare const NavigationMobile: import("react").FC<import("./components/modules/navigation/shared/types/types").NavigationModel>;
 export { PortableTextComponentDefault };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { withDefaultTheme } from "./hoc/withDefaultTheme";
+import { withDefaultTheme, withDefaultThemeWithRef, } from "./hoc/withDefaultTheme";
 // Buttons
 import { Button as ButtonComponent, } from "./components/buttons/button/button";
 import { TextButton as TextButtonComponent, } from "./components/buttons/text-button/text-button";
@@ -16,8 +16,6 @@ import { EntryList as EntryListComponent, EntryListItem as EntryListItemComponen
 import { Dropdown as DropdownComponent, } from "./components/inputs/dropdown/dropdown";
 import { Pagination as PaginationComponent, } from "./components/navigation/pagination/pagination";
 import { Accordion as AccordionComponent, AccordionItem as AccordionItemComponent, } from "./components/layout/accordion/accordion";
-import { NavigationCell as NavigationCellComponent, } from "./components/navigation/nav-cell/nav-cell";
-import { NavigationItem as NavigationItemComponent, } from "./components/navigation/nav-item/nav-item";
 import { CardBanner as CardBannerComponent, } from "./components/surfaces/cards/card-banner/card-banner";
 import { Paper as PaperComponent, } from "./components/surfaces/paper/paper";
 import { Link as LinkComponent, } from "./components/typography/link/link";
@@ -26,6 +24,9 @@ import { NormalText as NormalTextComponent, LeadParagraph as LeadParagraphCompon
 import { OrderedList as OrderedListComponent, UnorderedList as UnorderedListComponent, } from "./components/typography/list/list";
 import { PortableTextComponentDefault } from "./components/typography/portable-text/portable-text-component-default";
 import { Footer as FooterComponent, } from "./components/modules/footer/footer";
+import { LogoList as LogoListComponent, } from "./components/modules/logo-list/logo-list";
+import { NavigationDesktop as NavigationDesktopComponent, } from "./components/modules/navigation/navigation-desktop/navigation-desktop";
+import { NavigationMobile as NavigationMobileComponent, } from "./components/modules/navigation/navigation-mobile/navigation-mobile";
 // Icons
 export { CloseIcon } from "./components/icons/close-icon/close-icon";
 export { ExclamationMarkIcon } from "./components/icons/exclamation-mark-icon/exclamation-mark-icon";
@@ -46,7 +47,7 @@ export const FormLabel = withDefaultTheme(FormLabelComponent);
 export const TextField = withDefaultTheme(TextFieldComponent);
 export const EmailSignupForm = withDefaultTheme(EmailSignupFormComponent);
 export const Image = withDefaultTheme(ImageComponent);
-export const Container = withDefaultTheme(ContainerComponent);
+export const Container = withDefaultThemeWithRef(ContainerComponent);
 export const EntryList = withDefaultTheme(EntryListComponent);
 export const EntryListItem = withDefaultTheme(EntryListItemComponent);
 export const EntryListText = withDefaultTheme(EntryListTextComponent);
@@ -55,8 +56,6 @@ export const Dropdown = withDefaultTheme(DropdownComponent);
 export const Pagination = withDefaultTheme(PaginationComponent);
 export const Accordion = withDefaultTheme(AccordionComponent);
 export const AccordionItem = withDefaultTheme(AccordionItemComponent);
-export const NavigationCell = withDefaultTheme(NavigationCellComponent);
-export const NavigationItem = withDefaultTheme(NavigationItemComponent);
 export const CardBanner = withDefaultTheme(CardBannerComponent);
 export const Paper = withDefaultTheme(PaperComponent);
 export const Link = withDefaultTheme(LinkComponent);
@@ -71,4 +70,7 @@ export const ItalicText = withDefaultTheme(ItalicTextComponent);
 export const OrderedList = withDefaultTheme(OrderedListComponent);
 export const UnorderedList = withDefaultTheme(UnorderedListComponent);
 export const Footer = withDefaultTheme(FooterComponent);
+export const LogoList = withDefaultTheme(LogoListComponent);
+export const NavigationDesktop = withDefaultTheme(NavigationDesktopComponent);
+export const NavigationMobile = withDefaultTheme(NavigationMobileComponent);
 export { PortableTextComponentDefault };

package/dist/mocks/image-mocks.d.ts

@@ -28,3 +28,10 @@ export declare const svgMock: {
         extension: string;
     };
 };
+export declare const logoMock: {
+    asset: {
+        description: string;
+        url: string;
+        extension: string;
+    };
+};

package/dist/mocks/image-mocks.js

@@ -30,3 +30,10 @@ export const svgMock = {
         extension: 'svg'
     }
 };
+export const logoMock = {
+    asset: {
+        description: 'lorem ipsum',
+        url: 'https://placehold.co/142x35?text=Logotype',
+        extension: 'svg'
+    }
+};

package/dist/mocks/navigation-mock.d.ts

@@ -0,0 +1,5 @@
+import { NavigationItemModel, NavigationModel, NavigationSectionModel } from '../components/modules/navigation/shared/types/types';
+export declare const mockNavItemsA: NavigationItemModel[];
+export declare const mockNavItemsB: NavigationItemModel[];
+export declare const mockNavSections: NavigationSectionModel[];
+export declare const mockNavigation: NavigationModel;