@hlf-fe/pulmo-ui 1.5.1 → 1.5.3

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToggableChevron } from "../../../../../components/icons/toggable-chevron/toggable-chevron";
+import styled, { css } from "styled-components";
+import { media } from "../../../../../styles/mixins";
+import { rem } from "../../../../../styles/units";
+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%;
+  padding-right: ${rem(16)};
+
+  ${media.XL `
+    padding-right: ${rem(32)};
+
+    &:last-of-type {
+      padding-right: ${rem(40)};
+    }
+  `}
+`;
+const NavCell = styled.button `
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr 22px;
+  align-items: center;
+  height: 100%;
+  font-size: ${rem(14)};
+
+  ${media.XL `
+    font-size: ${rem(18)};
+  `}
+
+  p {
+    font-size: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+  }
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `};
+
+  ${({ $active }) => $active &&
+    css `
+      ${({ theme }) => css `
+        color: ${theme.red};
+        box-shadow: inset 0 -4px 0 ${theme.red};
+      `};
+    `};
+`;
+const StyledToggle = styled(ToggableChevron).attrs({
+    disableCircle: true,
+}) `
+  margin-left: ${rem(4)};
+
+  svg {
+    ${(props) => props.toggled &&
+    css `
+        ${({ theme }) => css `
+          fill: ${theme.red};
+        `};
+      `};
+  }
+`;

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

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

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToggableChevron } from "../../../../components/icons/toggable-chevron/toggable-chevron";
+import styled, { css } from "styled-components";
+import { media } from "../../../../styles/mixins";
+import { rem } from "../../../../styles/units";
+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%;
+  padding-right: ${rem(16)};
+
+  ${media.XL `
+    padding-right: ${rem(32)};
+
+    &:last-of-type {
+      padding-right: ${rem(40)};
+    }
+  `}
+`;
+const NavCell = styled.button `
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr 22px;
+  align-items: center;
+  height: 100%;
+  font-size: ${rem(14)};
+
+  ${media.XL `
+    font-size: ${rem(18)};
+  `}
+
+  p {
+    font-size: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+  }
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `};
+
+  ${({ $active }) => $active &&
+    css `
+      ${({ theme }) => css `
+        color: ${theme.red};
+        box-shadow: inset 0 -4px 0 ${theme.red};
+      `};
+    `};
+`;
+const StyledToggle = styled(ToggableChevron).attrs({
+    disableCircle: true,
+}) `
+  margin-left: ${rem(4)};
+
+  svg {
+    ${(props) => props.toggled &&
+    css `
+        ${({ theme }) => css `
+          fill: ${theme.red};
+        `};
+      `};
+  }
+`;

package/dist/components/modules/navigation/navigation-desktop/nav-section/nav-section.d.ts

@@ -0,0 +1,8 @@
+import { NavigationSectionModel } from "../../shared/types/types";
+type Props = {
+    section: NavigationSectionModel;
+    className?: string;
+    closeSection: () => void;
+};
+export declare const NavigationSection: ({ section, className, closeSection }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modules/navigation/navigation-desktop/nav-section/nav-section.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { NavigationItem } from "../../shared/nav-item/nav-item";
+import { CardBanner } from "../../../../../components/surfaces/cards/card-banner/card-banner";
+import styled, { css } from "styled-components";
+import { rem } from '../../../../../styles/units';
+export const NavigationSection = ({ section, className, closeSection }) => {
+    const [currentItem, setCurrentItem] = useState();
+    const onToggle = (item) => {
+        setCurrentItem(currentItem?.key !== item?.key ? item : undefined);
+    };
+    const renderColumn = (title, items) => (items ? (_jsxs(NavCol, { children: [_jsx(Header, { children: title }), _jsx(StyledList, { children: items.map((item) => (_jsx(NavigationItem, { model: item, expanded: currentItem?.key === item.key, parent: section.title, onToggle: onToggle, onLinkClick: closeSection }, item.key))) })] })) : _jsx("span", {}));
+    return (_jsx(Wrapper, { "data-test": "nav-section", className: className, children: _jsxs(Content, { children: [_jsxs(NavWrapper, { "data-test": "nav-block", children: [renderColumn(section.column1Title, section.column1Items), renderColumn(section.column2Title, section.column2Items)] }), _jsx(InfoWrapper, { color: section?.backgroundColor?.hex, children: section?.linkBanners && section?.linkBanners?.map((banner) => (_jsx(CardBanner, { ...banner, externalUrl: banner?.link?.externalUrl, internalLink: banner?.link?.internalLink?.slug?.current, onClick: closeSection }, banner.title.trim()))) })] }) }));
+};
+const Wrapper = styled.div `
+  @keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  position: absolute;
+  width: 100%;
+  animation: fadeIn 0.2s;
+`;
+const Content = styled.div `
+  position: absolute;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 55% 45%;
+  max-width: 1114px;
+  left: 50%;
+  transform: translateX(-50%);
+`;
+const NavWrapper = styled.div `
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: ${rem(20)};
+  background-color: white;
+  padding: ${rem(32)} ${rem(62)} ${rem(56)} ${rem(45)};
+`;
+const InfoWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: ${rem(45)};
+  background-color: white;
+
+  ${({ color }) => color && css `
+    background-color: ${color};
+  `};
+
+  > * {
+    &:first-child {
+        margin-bottom: ${rem(24)};
+    }
+  }
+`;
+const NavCol = styled.div `
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const StyledList = styled.ul `
+  margin: 0;
+  padding: 0;
+`;
+const Header = styled.h2 `
+  font-size: ${rem(24)};
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid ${({ theme }) => theme.grayPale};
+  padding-bottom: 2px;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `};
+`;

package/dist/components/modules/navigation/navigation-desktop/nav-section.d.ts

@@ -0,0 +1,8 @@
+import { NavigationSectionModel } from "../types";
+type Props = {
+    section: NavigationSectionModel;
+    className?: string;
+    closeSection: () => void;
+};
+export declare const NavigationSection: ({ section, className, closeSection }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modules/navigation/navigation-desktop/nav-section.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import styled, { css } from "styled-components";
+import { NavigationItem } from "../../../../components/navigation/nav-item/nav-item";
+import { CardBanner } from "../../../../components/surfaces/cards/card-banner/card-banner";
+import { rem } from '../../../../styles/units';
+export const NavigationSection = ({ section, className, closeSection }) => {
+    const [currentItem, setCurrentItem] = useState();
+    const onToggle = (item) => {
+        setCurrentItem(currentItem?.key !== item?.key ? item : undefined);
+    };
+    const renderColumn = (title, items) => (items ? (_jsxs(NavCol, { children: [_jsx(Header, { children: title }), _jsx(StyledList, { children: items.map((item) => (_jsx(NavigationItem, { model: item, expanded: currentItem?.key === item.key, parent: section.title, onToggle: onToggle, onLinkClick: closeSection }, item.key))) })] })) : _jsx("span", {}));
+    return (_jsx(Wrapper, { "data-test": "nav-section", className: className, children: _jsxs(Content, { children: [_jsxs(NavWrapper, { "data-test": "nav-block", children: [renderColumn(section.column1Title, section.column1Items), renderColumn(section.column2Title, section.column2Items)] }), _jsx(InfoWrapper, { color: section?.backgroundColor?.hex, children: section?.linkBanners && section?.linkBanners?.map((banner) => (_jsx(CardBanner, { ...banner, externalUrl: banner?.link?.externalUrl, internalLink: banner?.link?.internalLink?.slug?.current, onClick: closeSection }, banner.title.trim()))) })] }) }));
+};
+const Wrapper = styled.div `
+  @keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  position: absolute;
+  width: 100%;
+  animation: fadeIn 0.2s;
+`;
+const Content = styled.div `
+  position: absolute;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 55% 45%;
+  max-width: 1114px;
+  left: 50%;
+  transform: translateX(-50%);
+`;
+const NavWrapper = styled.div `
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: ${rem(20)};
+  background-color: white;
+  padding: ${rem(32)} ${rem(62)} ${rem(56)} ${rem(45)};
+`;
+const InfoWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: ${rem(45)};
+  background-color: white;
+
+  ${({ color }) => color && css `
+    background-color: ${color};
+  `};
+
+  > * {
+    &:first-child {
+        margin-bottom: ${rem(24)};
+    }
+  }
+`;
+const NavCol = styled.div `
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const StyledList = styled.ul `
+  margin: 0;
+  padding: 0;
+`;
+const Header = styled.h2 `
+  font-size: ${rem(24)};
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid ${({ theme }) => theme.grayPale};
+  padding-bottom: 2px;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `};
+`;

package/dist/components/modules/navigation/navigation-desktop/navigation-desktop.d.ts

@@ -0,0 +1,3 @@
+import { NavigationModel } from '../shared/types/types';
+export type NavigationDesktopProps = NavigationModel;
+export declare const NavigationDesktop: ({ logotype, mainMenuItems, topMenuItems, ctaButton, localeText, isMenuVisible, menuRef }: NavigationDesktopProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Link } from 'gatsby';
+import { NavigationSection } from './nav-section/nav-section';
+import { NavigationCell } from './nav-cell/nav-cell';
+import { Image } from '../../../../components/layout/image/image';
+import { Button } from '../../../../components/buttons/button/button';
+import { ExternalIcon } from '../../../../components/icons/external-icon/external-icon';
+import styled, { css } from 'styled-components';
+import { rem } from '../../../../styles/units';
+export const NavigationDesktop = ({ logotype, mainMenuItems, topMenuItems, ctaButton, localeText = {
+    ariaLabelHome: "",
+}, isMenuVisible, menuRef }) => {
+    const [currentSection, setCurrentSection] = useState();
+    const [isSearchOpen, setIsSearchOpen] = useState(false);
+    const { ariaLabelHome } = localeText;
+    const onOpenSection = (section) => {
+        const sectionToShow = currentSection?.key !== section?.key ? section : undefined;
+        setCurrentSection(sectionToShow);
+    };
+    return (_jsxs(Wrapper, { ref: menuRef, children: [_jsxs(MenuContainer, { children: [!!topMenuItems?.length && (_jsx(TopBar, { "data-test": "nav-top-bar", children: topMenuItems.map(({ webUrlName, internalLink, externalUrl }) => (_jsx(StyledTopLink, { to: externalUrl || internalLink?.slug?.current || '/', children: webUrlName }, webUrlName))) })), _jsxs(NavBar, { children: [logotype && (_jsx(StyledLogoLink, { "data-test": "nav-logo", to: '/', "aria-label": ariaLabelHome, children: _jsx(Image, { image: logotype?.asset, width: "142", height: "35" }) })), _jsx(StyledList, { "data-test": "nav-list", children: mainMenuItems?.map(section => (_jsx(NavigationCell, { active: currentSection?.key === section.key, title: section.title, onToggleCell: () => onOpenSection(section) }, section.key))) }), ctaButton && (_jsxs(StyledButton, { dataTest: "nav-cta", to: ctaButton?.externalUrl, href: ctaButton?.internalLink?.slug?.current, children: [ctaButton.webUrlName, _jsx(IconWrapper, { children: _jsx(ExternalIcon, {}) })] }))] })] }), currentSection && (_jsx(StyledNavSection, { section: currentSection, closeSection: () => onOpenSection(undefined) })), (currentSection || isSearchOpen) && (_jsx(Overlay, { "data-test": "nav-overlay", "$isSearchOpen": isSearchOpen, "$playFadeOut": !isMenuVisible, onClick: () => {
+                    onOpenSection(undefined);
+                    setIsSearchOpen(false);
+                } }))] }));
+};
+const Wrapper = styled.nav `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  z-index: 10;
+
+  a {
+    text-decoration: none;
+  }
+`;
+const MenuContainer = styled.div `
+  position: relative;
+  max-width: ${({ theme }) => theme.siteMaxWidth};
+  margin: 0 auto;
+  width: 100%;
+`;
+const Overlay = styled.div `
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: ${rem(128)};
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+  animation: fadeIn 0.2s forwards;
+
+  ${({ $isSearchOpen }) => $isSearchOpen &&
+    css `
+      top: ${rem(52)};
+      z-index: 2;
+    `}
+
+  ${({ $playFadeOut }) => $playFadeOut &&
+    css `
+      animation: fadeOut 0.2s forwards;
+    `}
+`;
+const TopBar = styled.div `
+  position: relative;
+  display: flex;
+  height: 52px;
+  justify-content: flex-end;
+  align-items: center;
+  background: white;
+  padding-right: ${rem(56)};
+`;
+const NavBar = styled.div `
+  position: relative;
+  display: flex;
+  height: 76px;
+  background: white;
+  padding: 0 ${rem(56)};
+`;
+const StyledButton = styled(Button) `
+  align-self: center;
+  white-space: nowrap;
+`;
+const IconWrapper = styled.span ``;
+const StyledTopLink = styled(Link) `
+  font-size: ${rem(16)};
+  font-weight: 500;
+  margin: 0;
+  margin-right: ${rem(32)};
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueMedium};
+  `};
+
+  &:focus-visible {
+    outline: ${rem(2)} solid ${({ theme }) => theme.blackLight};
+    outline-offset: ${rem(2)};
+    border-radius: ${rem(2)};
+  }
+`;
+const StyledLogoLink = styled(Link) `
+  display: flex;
+  align-self: center;
+  margin-right: ${rem(16)};
+`;
+const StyledList = styled.ul `
+  margin: 0;
+  padding: 0;
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+`;
+const StyledNavSection = styled(NavigationSection) `
+  top: 100%;
+  z-index: 1;
+`;

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

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

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

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

package/dist/components/modules/navigation/navigation-mobile/nav-panel.d.ts

@@ -0,0 +1,11 @@
+import { WebPageUrl } from "../../../../models/web-page-url";
+import { NavigationSectionModel } from "../shared/types/types";
+type Props = {
+    mainMenuItems?: NavigationSectionModel[];
+    topMenuItems?: WebPageUrl[];
+    scrollToTop: () => void;
+    closeMenu: () => void;
+    goBackText: string;
+};
+declare const NavigationPanel: ({ mainMenuItems, topMenuItems, scrollToTop, closeMenu, goBackText }: Props) => import("react/jsx-runtime").JSX.Element;
+export default NavigationPanel;

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

@@ -0,0 +1,158 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Link } from "gatsby";
+import { ToggableChevron } from "../../../../components/icons/toggable-chevron/toggable-chevron";
+import { CardBanner } from "../../../../components/surfaces/cards/card-banner/card-banner";
+import { NavigationItem } from "../shared/nav-item/nav-item";
+import styled, { css } from "styled-components";
+import { rem } from '../../../../styles/units';
+const NavigationPanel = ({ mainMenuItems, topMenuItems, scrollToTop, closeMenu, goBackText }) => {
+    const [currentSection, setCurrentSection] = useState();
+    const [currentItem, setCurrentItem] = useState();
+    const [isShowingSection, setIsShowingSection] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const toggleSection = (section) => {
+        if (isAnimating)
+            return;
+        if (section) {
+            setCurrentSection(section);
+        }
+        setIsShowingSection(!!section);
+        setIsAnimating(true);
+        scrollToTop();
+    };
+    const toggleItem = (item) => {
+        setCurrentItem(currentItem?.key !== item?.key ? item : undefined);
+    };
+    const renderColumn = (title, items) => (items && (_jsxs(_Fragment, { children: [_jsx(Header, { children: title }), _jsx(StyledList, { children: items.map((item) => (_jsx(NavigationItem, { model: item, expanded: currentItem?.key === item.key, parent: currentSection?.title, onToggle: toggleItem, onLinkClick: closeMenu }, item.key))) })] })));
+    return (_jsxs(Wrapper, { "data-test": "nav-panel-wrapper", toggled: isShowingSection, onTransitionEnd: () => setIsAnimating(false), children: [_jsx(Panel, { visible: true, children: _jsxs(PanelLayout, { children: [_jsx(StyledList, { "data-test": "nav-list", children: mainMenuItems?.map((section) => (_jsx("li", { children: _jsxs(NavCell, { "data-test": "nav-cell", onClick: () => toggleSection(section), children: [_jsx("p", { children: section.title }), _jsx(Chevron, {})] }) }, section.key))) }), !!topMenuItems?.length && (_jsx(LinkContainer, { "data-test": "nav-sub-menu", children: topMenuItems.map(({ webUrlName, internalLink, externalUrl }) => (_jsx(StyledLink, { to: externalUrl || internalLink?.slug?.current || "/", children: webUrlName }, webUrlName))) }))] }) }), _jsxs(Panel, { "data-test": "nav-panel-section", visible: isShowingSection || isAnimating, children: [_jsxs(PanelLayout, { children: [_jsxs(BackCell, { "data-test": "nav-panel-back", onClick: () => toggleSection(undefined), children: [_jsx(BackChevron, { disableCircle: false }), goBackText] }), renderColumn(currentSection?.column1Title, currentSection?.column1Items), renderColumn(currentSection?.column2Title, currentSection?.column2Items)] }), _jsx(InfoWrapper, { color: currentSection?.backgroundColor?.hex, children: currentSection?.linkBanners && currentSection?.linkBanners?.map((banner) => (_jsx(CardBanner, { ...banner, externalUrl: banner?.link?.externalUrl, internalLink: banner?.link?.internalLink?.slug?.current, onClick: closeMenu }, banner.title.trim()))) })] })] }));
+};
+const Wrapper = styled.div `
+  width: 100%;
+  display: flex;
+  transform: translateX(0%);
+  transition: transform ease-in-out 0.6s;
+
+  ${({ toggled }) => toggled && css `
+    transform: translateX(-100%);
+  `}
+`;
+const Panel = styled.div `
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  display: none;
+
+  ${({ visible }) => visible && css `
+    display: block;
+  `}
+`;
+const PanelLayout = styled.div `
+  padding: ${rem(24)};
+  padding-bottom: ${rem(40)};
+`;
+const StyledList = styled.ul `
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  li {
+    margin-bottom: ${rem(16)};
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+const NavCell = styled.button `
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr 22px;
+  align-items: center;
+  width: 100%;
+  font-size: ${rem(20)};
+
+  p {
+    font-size: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+    text-align: left;
+  }
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `};
+`;
+const Chevron = styled(ToggableChevron).attrs({
+    rotation: -90,
+}) `
+  margin-left: auto;
+`;
+const BackCell = styled(NavCell) `
+  display: flex;
+  font-size: ${rem(16)};
+  width: fit-content;
+`;
+const BackChevron = styled(ToggableChevron).attrs({
+    rotation: -270,
+}) `
+  margin-right: ${rem(4)};
+`;
+const LinkContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  padding-top: ${rem(32)};
+`;
+const StyledLink = styled(Link) `
+  font-size: ${rem(16)};
+  font-weight: 500;
+  margin: 0;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueMedium};
+  `};
+
+  &:not(:last-child) {
+    margin-bottom: ${rem(24)};
+  };
+`;
+const Header = styled.h2 `
+  font-size: ${rem(20)};
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid ${({ theme }) => theme.grayPale};
+  padding-bottom: ${rem(8)};
+  margin-top: ${rem(30)};
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `};
+`;
+const InfoWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: ${rem(32)} ${rem(15)};
+  
+  ${({ color }) => color && css `
+    background-color: ${color};
+  `};
+
+  > * {
+    &:first-child {
+        margin-bottom: ${rem(16)};
+    }
+  }
+`;
+export default NavigationPanel;

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

@@ -0,0 +1,3 @@
+import { NavigationModel } from '../shared/types/types';
+export type NavigationMobileProps = NavigationModel;
+export declare const NavigationMobile: ({ logotype, mainMenuItems, topMenuItems, ctaButton, localeText, }: NavigationMobileProps) => import("react/jsx-runtime").JSX.Element;