@hlf-fe/pulmo-ui 1.5.3 → 1.5.4

package/dist/components/buttons/button/button.js

@@ -52,7 +52,6 @@ const StyledButton = styled.button `
   ${({ theme, $inverted, $fullWidth }) => css `
     ${media.M `
       width: ${$fullWidth ? "100%" : "fit-content"};
-      font-size: ${rem(18)};
     `}
 
     &:not(:disabled) {

package/dist/components/icons/toggable-chevron/toggable-chevron.d.ts

@@ -3,10 +3,14 @@ type ToggableChevronProps = {
     disableCircle?: boolean;
     className?: string;
     rotation?: number;
+    width?: number;
+    height?: number;
 };
 type ChevronDownProps = {
     className?: string;
+    width?: number;
+    height?: number;
 };
-export declare const ChevronDownIcon: ({ className }: ChevronDownProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ToggableChevron: ({ toggled, disableCircle, rotation, className, }: ToggableChevronProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChevronDownIcon: ({ className, width, height }: ChevronDownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToggableChevron: ({ toggled, disableCircle, rotation, className, width, height }: ToggableChevronProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/icons/toggable-chevron/toggable-chevron.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
-export const ChevronDownIcon = ({ className }) => (_jsx("svg", { width: "16px", height: "16px", viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg", fill: "#333333", className: className, children: _jsx("path", { d: "M2.29289322,5.29289322 C2.65337718,4.93240926 3.22060824,4.90467972 3.61289944,5.20970461 L3.70710678,5.29289322 L8,9.585 L12.2928932,5.29289322 C12.6533772,4.93240926 13.2206082,4.90467972 13.6128994,5.20970461 L13.7071068,5.29289322 C14.0675907,5.65337718 14.0953203,6.22060824 13.7902954,6.61289944 L13.7071068,6.70710678 L8.70710678,11.7071068 C8.34662282,12.0675907 7.77939176,12.0953203 7.38710056,11.7902954 L7.29289322,11.7071068 L2.29289322,6.70710678 C1.90236893,6.31658249 1.90236893,5.68341751 2.29289322,5.29289322 Z" }) }));
-export const ToggableChevron = ({ toggled, disableCircle = true, rotation, className, }) => (_jsx(Chevron, { "$isToggled": toggled, "$disableCircle": disableCircle, "$rotation": rotation, className: className, children: _jsx(ChevronDownIcon, {}) }));
+export const ChevronDownIcon = ({ className, width = 16, height = 16 }) => (_jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg", fill: "#333333", className: className, children: _jsx("path", { d: "M2.29289322,5.29289322 C2.65337718,4.93240926 3.22060824,4.90467972 3.61289944,5.20970461 L3.70710678,5.29289322 L8,9.585 L12.2928932,5.29289322 C12.6533772,4.93240926 13.2206082,4.90467972 13.6128994,5.20970461 L13.7071068,5.29289322 C14.0675907,5.65337718 14.0953203,6.22060824 13.7902954,6.61289944 L13.7071068,6.70710678 L8.70710678,11.7071068 C8.34662282,12.0675907 7.77939176,12.0953203 7.38710056,11.7902954 L7.29289322,11.7071068 L2.29289322,6.70710678 C1.90236893,6.31658249 1.90236893,5.68341751 2.29289322,5.29289322 Z" }) }));
+export const ToggableChevron = ({ toggled, disableCircle = true, rotation, className, width, height }) => (_jsx(Chevron, { "$isToggled": toggled, "$disableCircle": disableCircle, "$rotation": rotation, className: className, children: _jsx(ChevronDownIcon, { width: width, height: height }) }));
 const Chevron = styled.div `
   width: 22px;
   height: 22px;

package/dist/components/layout/accordion/accordion.d.ts

@@ -4,10 +4,11 @@ export type AccordionItemProps = {
     panelId: string;
     regionId: string;
     initiallyExpanded?: boolean;
+    expandIcon?: string;
     children?: ReactNode;
     headingLevel?: "h2" | "h3";
 };
-export declare const AccordionItem: ({ heading, headingLevel, panelId, regionId, initiallyExpanded, children, }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionItem: ({ heading, headingLevel, panelId, regionId, initiallyExpanded, expandIcon, children, }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Accordion: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     disabled?: boolean;
 }>> & string;

package/dist/components/layout/accordion/accordion.js

@@ -4,6 +4,7 @@ import styled, { css } from "styled-components";
 import { media } from "../../../styles/mixins";
 import { rem } from "../../../styles/units";
 import { ToggablePlusMinusIcon } from "../../../components/icons/toggable-plus-minus-icon/toggable-plus-minus-icon";
+import { ToggableChevron } from "../../../components/icons/toggable-chevron/toggable-chevron";
 var PanelState;
 (function (PanelState) {
     PanelState[PanelState["CLOSED"] = 0] = "CLOSED";
@@ -11,7 +12,7 @@ var PanelState;
     PanelState[PanelState["OPENED"] = 2] = "OPENED";
     PanelState[PanelState["CLOSING"] = 3] = "CLOSING";
 })(PanelState || (PanelState = {}));
-export const AccordionItem = ({ heading, headingLevel, panelId, regionId, initiallyExpanded, children, }) => {
+export const AccordionItem = ({ heading, headingLevel, panelId, regionId, initiallyExpanded, expandIcon, children, }) => {
     const [height, setHeight] = useState(0);
     const [panelState, setPanelState] = useState(!initiallyExpanded ? PanelState.CLOSED : PanelState.OPENING);
     const ref = useRef(null);
@@ -39,7 +40,16 @@ export const AccordionItem = ({ heading, headingLevel, panelId, regionId, initia
         setPanelState(isClosed ? PanelState.OPENING : PanelState.CLOSING);
     };
     const isExpanded = panelState !== PanelState.CLOSED;
-    return (_jsxs(AccordionPanel, { children: [_jsx(StyledHeading, { as: headingLevel, children: _jsxs(StyledButton, { "data-test": `accordion-header${isExpanded ? "-expanded" : ""}`, id: panelId, "aria-expanded": isExpanded, "aria-controls": regionId, onClick: togglePanel, children: [_jsx(Text, { children: heading }), _jsx(StyledToggablePlusMinusIcon, { isOpen: isExpanded })] }) }), _jsx(AccodrionContent, { "data-test": "accordion-content", ref: ref, id: regionId, role: "region", "aria-labelledby": panelId, "$contentHeight": height, "$useAutoHeight": panelState === PanelState.OPENED, onTransitionEnd: onAnimationComplete, children: _jsx(Content, { hidden: !isExpanded, children: children }) })] }));
+    const icon = () => {
+        switch (expandIcon) {
+            case 'arrow':
+                return _jsx(StyledToggableChevron, { toggled: isExpanded, width: 20, height: 20 });
+            default:
+                return _jsx(StyledToggablePlusMinusIcon, { isOpen: isExpanded });
+                ;
+        }
+    };
+    return (_jsxs(AccordionPanel, { children: [_jsx(StyledHeading, { as: headingLevel, children: _jsxs(StyledButton, { "data-test": `accordion-header${isExpanded ? "-expanded" : ""}`, id: panelId, "aria-expanded": isExpanded, "aria-controls": regionId, onClick: togglePanel, children: [_jsx(Text, { children: heading }), icon()] }) }), _jsx(AccodrionContent, { "data-test": "accordion-content", ref: ref, id: regionId, role: "region", "aria-labelledby": panelId, "$contentHeight": height, "$useAutoHeight": panelState === PanelState.OPENED, onTransitionEnd: onAnimationComplete, children: _jsx(Content, { hidden: !isExpanded, children: children }) })] }));
 };
 const AccodrionContent = styled.div `
   overflow: hidden;
@@ -97,11 +107,17 @@ const StyledButton = styled.button `
     padding: ${rem(25)} 0;
   `}
 `;
-const StyledToggablePlusMinusIcon = styled(ToggablePlusMinusIcon) `
+const iconStyles = css `
   cursor: pointer;
   margin-left: auto;
   margin-right: ${rem(10)};
 `;
+const StyledToggablePlusMinusIcon = styled(ToggablePlusMinusIcon) `
+ ${iconStyles}
+`;
+const StyledToggableChevron = styled(ToggableChevron) `
+  ${iconStyles}
+`;
 export const Accordion = styled.div `
   border-bottom: 1px solid rgba(51, 51, 51, 0.2);
   width: 100%;

package/dist/components/layout/accordion/accordion.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Accordion>;
 export default meta;
 type Story = StoryObj<typeof Accordion>;
 export declare const Default: Story;
+export declare const WithArrowIcon: Story;

package/dist/components/layout/accordion/accordion.stories.js

@@ -12,3 +12,6 @@ export default meta;
 export const Default = {
     render: () => (_jsxs(Accordion, { children: [_jsx(AccordionItem, { heading: "In volutpat est eu dolor efficitur", panelId: "1", regionId: "1", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper elit. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "Vestibulum eget ullamcorper,\r\n        Praesent mattis arcu ante", panelId: "2", regionId: "2", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper, Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "In volutpat est eu dolor efficitur", panelId: "3", regionId: "3", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper elit. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "Vestibulum eget ullamcorper,\r\n        Praesent mattis arcu ante", panelId: "4", regionId: "4", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper, Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." })] })),
 };
+export const WithArrowIcon = {
+    render: () => (_jsxs(Accordion, { children: [_jsx(AccordionItem, { heading: "In volutpat est eu dolor efficitur", panelId: "1", regionId: "1", expandIcon: "arrow", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper elit. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "Vestibulum eget ullamcorper,\r\n        Praesent mattis arcu ante", panelId: "2", regionId: "2", expandIcon: "arrow", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper, Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "In volutpat est eu dolor efficitur", panelId: "3", regionId: "3", expandIcon: "arrow", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper elit. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "Vestibulum eget ullamcorper,\r\n        Praesent mattis arcu ante", panelId: "4", regionId: "4", expandIcon: "arrow", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper, Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." })] })),
+};

package/dist/components/layout/image/image.d.ts

@@ -1,8 +1,8 @@
 import { IGatsbyImageData } from "gatsby-plugin-image";
 export type ImageProps = {
     image: {
-        description: string;
         gatsbyImageData: IGatsbyImageData;
+        altText?: string;
         url?: string;
         extension?: string;
     };

package/dist/components/layout/image/image.js

@@ -4,7 +4,7 @@ import { BREAKPOINT_VALUES } from "../../../styles/theme";
 import { em } from "../../../styles/units";
 const SVG = "svg";
 export const Image = ({ image, imageSmall, className = "", imgClassName = "", width = "auto", height = "auto", bpSmallDevice = BREAKPOINT_VALUES.M, objectPosition = "50% 50%", loading = "lazy", onLoad, }) => {
-    const desc = image?.description;
+    const altText = image?.altText;
     const contentType = image?.extension;
     const fileUrl = image?.url;
     const gatsbyImageData = getImage(image?.gatsbyImageData);
@@ -20,8 +20,8 @@ export const Image = ({ image, imageSmall, className = "", imgClassName = "", wi
         ])
         : gatsbyImageData;
     if (contentType === SVG && fileUrl)
-        return (_jsx("img", { width: width, height: height, className: className, src: fileUrl, alt: desc }));
+        return (_jsx("img", { width: width, height: height, className: className, src: fileUrl, alt: altText }));
     if (images)
-        return (_jsx(GatsbyImage, { className: className, imgClassName: imgClassName, image: images, loading: loading, alt: desc ?? "", objectPosition: objectPosition, onLoad: onLoad }));
+        return (_jsx(GatsbyImage, { className: className, imgClassName: imgClassName, image: images, loading: loading, alt: altText ?? "", objectPosition: objectPosition, onLoad: onLoad }));
     return null;
 };

package/dist/components/layout/image/{Image.stories.js → image.stories.js}

@@ -26,7 +26,7 @@ export default meta;
 export const Default = {
     args: {
         image: {
-            description: "Exempelbild",
+            altText: "Exempelbild",
             gatsbyImageData: mockGatsbyImageData,
         },
     },

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

@@ -10,7 +10,7 @@ export const NavigationSection = ({ section, className, closeSection }) => {
         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()))) })] }) }));
+    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, i) => (_jsx(CardBanner, { ...banner, externalUrl: banner?.link?.externalUrl, internalLink: banner?.link?.internalLink?.slug?.current, onClick: closeSection }, `${banner.title.trim()}-${i}`))) })] }) }));
 };
 const Wrapper = styled.div `
   @keyframes fadeIn {

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

@@ -18,7 +18,7 @@ export const NavigationDesktop = ({ logotype, mainMenuItems, topMenuItems, ctaBu
         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: () => {
+    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?.internalLink?.slug?.current, href: ctaButton?.externalUrl, 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);
                 } }))] }));
@@ -100,7 +100,9 @@ const StyledButton = styled(Button) `
   align-self: center;
   white-space: nowrap;
 `;
-const IconWrapper = styled.span ``;
+const IconWrapper = styled.span `
+  margin-top: ${rem(4)};
+`;
 const StyledTopLink = styled(Link) `
   font-size: ${rem(16)};
   font-weight: 500;
@@ -121,6 +123,7 @@ const StyledTopLink = styled(Link) `
 const StyledLogoLink = styled(Link) `
   display: flex;
   align-self: center;
+  max-width: ${rem(264)};
   margin-right: ${rem(16)};
 `;
 const StyledList = styled.ul `

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

@@ -25,7 +25,7 @@ const NavigationPanel = ({ mainMenuItems, topMenuItems, scrollToTop, closeMenu,
         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()))) })] })] }));
+    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, i) => (_jsx(CardBanner, { ...banner, externalUrl: banner?.link?.externalUrl, internalLink: banner?.link?.internalLink?.slug?.current, onClick: closeMenu }, `${banner.title.trim()}-${i}`))) })] })] }));
 };
 const Wrapper = styled.div `
   width: 100%;

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

@@ -1,3 +1,3 @@
-import { NavigationModel } from '../shared/types/types';
+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;

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

@@ -1,33 +1,34 @@
 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';
+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: ""
+    goBack: "",
 }, }) => {
     const { ariaLabelHome, goBack } = localeText;
     const [isOpen, setIsOpen] = useState(false);
     const stickyRef = useRef(null);
+    const emptyMenuItems = !mainMenuItems?.length && !topMenuItems?.length;
     useEffect(() => {
-        document.body.style.overflow = isOpen ? 'hidden' : '';
+        document.body.style.overflow = isOpen ? "hidden" : "";
     }, [isOpen]);
     // On Unmount, cleanup
     useEffect(() => {
         return () => {
-            document.body.style.overflow = '';
+            document.body.style.overflow = "";
         };
     }, []);
     const scrollToTop = () => {
-        stickyRef.current?.scroll({ top: 0, behavior: 'smooth' });
+        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 }) }))] }) }));
+    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 })), !emptyMenuItems && (_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;
@@ -63,10 +64,7 @@ const TopBar = styled.div `
 const StyledLogoLink = styled(Link) `
   display: flex;
   align-self: center;
-
-  img {
-    height: ${rem(28)};
-  }
+  max-width: ${rem(140)};
 `;
 const StyledButton = styled(Button) `
   display: flex;

package/dist/components/typography/heading/heading.d.ts

@@ -0,0 +1,4 @@
+export declare const H1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const H2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const H3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const H4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;

package/dist/components/typography/heading/heading.js

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+import { media } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
+export const H1 = styled.h1 `
+  font-family: ${({ theme }) => theme.valueBold};
+  color: ${({ theme }) => theme.blackLight};
+  font-size: ${rem(40)};
+  line-height: 1.15;
+
+  ${media.L `
+    font-size: ${rem(64)};
+    line-height: 1.09;
+  `}
+`;
+export const H2 = styled.h2 `
+  font-family: ${({ theme }) => theme.valueBold};
+  color: ${({ theme }) => theme.blackLight};
+  font-size: ${rem(28)};
+  line-height: 1.14;
+
+  ${media.L `
+    font-size: ${rem(32)};
+    line-height: 1.5;
+  `}
+`;
+export const H3 = styled.h3 `
+  font-family: ${({ theme }) => theme.valueBold};
+  color: ${({ theme }) => theme.blackLight};
+  font-size: ${rem(22)};
+  line-height: 1.45;
+
+  ${media.L `
+    font-size: ${rem(28)};
+    line-height: 1.43;
+  `}
+`;
+export const H4 = styled.h4 `
+  font-family: ${({ theme }) => theme.valueBold};
+  color: ${({ theme }) => theme.blackLight};
+  font-size: ${rem(22)};
+  line-height: 1.45;
+
+  ${media.L `
+    font-size: ${rem(28)};
+    line-height: 1.43;
+  `}
+`;

package/dist/components/typography/heading/heading.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const Heading1: StoryObj;
+export declare const Heading2: StoryObj;
+export declare const Heading3: StoryObj;
+export declare const Heading4: StoryObj;

package/dist/components/typography/heading/heading.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { H1, H2, H3, H4 } from "./heading";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Typography/Headings",
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Heading1 = {
+    name: "H1",
+    render: () => (_jsx(_Fragment, { children: _jsx(H1, { children: "This is an H1" }) })),
+};
+export const Heading2 = {
+    name: "H2",
+    render: () => (_jsx(_Fragment, { children: _jsx(H2, { children: "This is an H2" }) })),
+};
+export const Heading3 = {
+    name: "H3",
+    render: () => (_jsx(_Fragment, { children: _jsx(H3, { children: "This is an H2" }) })),
+};
+export const Heading4 = {
+    name: "H4",
+    render: () => (_jsx(_Fragment, { children: _jsx(H4, { children: "This is an H2" }) })),
+};

package/dist/components/typography/heading/headings.d.ts

@@ -0,0 +1,4 @@
+export declare const H1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const H2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const H3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const H4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;

package/dist/components/typography/heading/headings.js

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+import { media } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
+export const H1 = styled.h1 `
+  font-family: ${({ theme }) => theme.valueBold};
+  color: ${({ theme }) => theme.blackLight};
+  font-size: ${rem(40)};
+  line-height: 1.15;
+
+  ${media.L `
+    font-size: ${rem(64)};
+    line-height: 1.09;
+  `}
+`;
+export const H2 = styled.h2 `
+  font-family: ${({ theme }) => theme.valueBold};
+  color: ${({ theme }) => theme.blackLight};
+  font-size: ${rem(28)};
+  line-height: 1.14;
+
+  ${media.L `
+    font-size: ${rem(32)};
+    line-height: 1.5;
+  `}
+`;
+export const H3 = styled.h3 `
+  font-family: ${({ theme }) => theme.valueBold};
+  color: ${({ theme }) => theme.blackLight};
+  font-size: ${rem(22)};
+  line-height: 1.45;
+
+  ${media.L `
+    font-size: ${rem(28)};
+    line-height: 1.43;
+  `}
+`;
+export const H4 = styled.h4 `
+  font-family: ${({ theme }) => theme.valueBold};
+  color: ${({ theme }) => theme.blackLight};
+  font-size: ${rem(22)};
+  line-height: 1.45;
+
+  ${media.L `
+    font-size: ${rem(28)};
+    line-height: 1.43;
+  `}
+`;

package/dist/components/typography/heading/headings.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const Heading1: StoryObj;
+export declare const Heading2: StoryObj;
+export declare const Heading3: StoryObj;
+export declare const Heading4: StoryObj;

package/dist/components/typography/heading/headings.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { H1, H2, H3, H4 } from "./headings";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Typography/Headings",
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Heading1 = {
+    name: "H1",
+    render: () => (_jsx(_Fragment, { children: _jsx(H1, { children: "This is an H1" }) })),
+};
+export const Heading2 = {
+    name: "H2",
+    render: () => (_jsx(_Fragment, { children: _jsx(H2, { children: "This is an H2" }) })),
+};
+export const Heading3 = {
+    name: "H3",
+    render: () => (_jsx(_Fragment, { children: _jsx(H3, { children: "This is an H2" }) })),
+};
+export const Heading4 = {
+    name: "H4",
+    render: () => (_jsx(_Fragment, { children: _jsx(H4, { children: "This is an H2" }) })),
+};

package/dist/components/typography/headings/headings.js

@@ -6,6 +6,7 @@ export const H1 = styled.h1 `
   color: ${({ theme }) => theme.blackLight};
   font-size: ${rem(40)};
   line-height: 1.15;
+  margin-bottom: 0; 
 
   ${media.L `
     font-size: ${rem(64)};
@@ -17,6 +18,7 @@ export const H2 = styled.h2 `
   color: ${({ theme }) => theme.blackLight};
   font-size: ${rem(28)};
   line-height: 1.14;
+  margin-bottom: 0; 
 
   ${media.L `
     font-size: ${rem(32)};
@@ -28,6 +30,7 @@ export const H3 = styled.h3 `
   color: ${({ theme }) => theme.blackLight};
   font-size: ${rem(22)};
   line-height: 1.45;
+  margin-bottom: 0; 
 
   ${media.L `
     font-size: ${rem(28)};
@@ -39,6 +42,7 @@ export const H4 = styled.h4 `
   color: ${({ theme }) => theme.blackLight};
   font-size: ${rem(22)};
   line-height: 1.45;
+  margin-bottom: 0; 
 
   ${media.L `
     font-size: ${rem(28)};

package/dist/components/typography/headings/headings.stories.js

@@ -18,9 +18,9 @@ export const Heading2 = {
 };
 export const Heading3 = {
     name: "H3",
-    render: () => (_jsx(_Fragment, { children: _jsx(H3, { children: "This is an H2" }) })),
+    render: () => (_jsx(_Fragment, { children: _jsx(H3, { children: "This is an H3" }) })),
 };
 export const Heading4 = {
     name: "H4",
-    render: () => (_jsx(_Fragment, { children: _jsx(H4, { children: "This is an H2" }) })),
+    render: () => (_jsx(_Fragment, { children: _jsx(H4, { children: "This is an H4" }) })),
 };

package/dist/components/typography/portable-text/portable-text-default.d.ts

@@ -0,0 +1,39 @@
+export declare const PortableTextDefault: {
+    marks: {
+        link: any;
+        strong: ({ children }: {
+            children: any;
+        }) => import("react/jsx-runtime").JSX.Element;
+        italic: ({ children }: {
+            children: any;
+        }) => import("react/jsx-runtime").JSX.Element;
+    };
+    list: {
+        bullet: ({ children }: {
+            children: any;
+        }) => import("react/jsx-runtime").JSX.Element;
+        number: ({ children }: {
+            children: any;
+        }) => import("react/jsx-runtime").JSX.Element;
+    };
+    block: {
+        h1: ({ children }: {
+            children: any;
+        }) => import("react/jsx-runtime").JSX.Element;
+        h2: ({ children }: {
+            children: any;
+        }) => import("react/jsx-runtime").JSX.Element;
+        h3: ({ children }: {
+            children: any;
+        }) => import("react/jsx-runtime").JSX.Element;
+        h4: ({ children }: {
+            children: any;
+        }) => import("react/jsx-runtime").JSX.Element;
+        normal: ({ children }: {
+            children: any;
+        }) => import("react/jsx-runtime").JSX.Element;
+        leadParagraph: ({ children }: {
+            children: any;
+        }) => import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/components/typography/portable-text/portable-text-default.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BoldText, ItalicText, NormalText, LeadParagraph, } from "../../../components/typography/text/text";
+import { UnorderedList, OrderedList } from "../../../components/typography/list/list";
+import { H1, H2, H3, H4 } from "../../../components/typography/heading/headings";
+export const PortableTextDefault = {
+    marks: {
+        link: LinkElement,
+        strong: ({ children }) => _jsx(BoldText, { children: children }),
+        italic: ({ children }) => _jsx(ItalicText, { children: children }),
+    },
+    list: {
+        bullet: ({ children }) => _jsx(UnorderedList, { children: children }),
+        number: ({ children }) => _jsx(OrderedList, { children: children }),
+    },
+    block: {
+        h1: ({ children }) => _jsx(H1, { children: children }),
+        h2: ({ children }) => _jsx(H2, { children: children }),
+        h3: ({ children }) => _jsx(H3, { children: children }),
+        h4: ({ children }) => _jsx(H4, { children: children }),
+        normal: ({ children }) => _jsx(NormalText, { children: children }),
+        leadParagraph: ({ children }) => _jsx(LeadParagraph, { children: children }),
+    },
+};

package/dist/models/sanity-types.d.ts

@@ -2,7 +2,7 @@ import { IGatsbyImageData } from 'gatsby-plugin-image';
 export type SanityImage = {
     asset: {
         gatsbyImageData: IGatsbyImageData;
-        description: string;
+        altText?: string;
         url?: string;
         extension?: string;
     };

package/dist/styles/mixins/theme-mixins/theme-mixins.d.ts

@@ -0,0 +1,5 @@
+import { THEME_COLORS_BY_HEX, THEME_COLORS_BY_NAME, SIZES } from "../../../models/theme";
+export declare const themeColors: (color: THEME_COLORS_BY_HEX | THEME_COLORS_BY_NAME) => string;
+export declare const themeSpacing: (size: SIZES) => string;
+export declare const themeBorderRadius: (size: "sm" | "md" | "lg") => string;
+export declare const themeElevation: (elevation: 0 | 1) => string;

package/dist/styles/mixins/theme-mixins/theme-mixins.js

@@ -0,0 +1,37 @@
+import { COLORS, THEME_SPACING } from "../../../styles/theme";
+import { rem } from "../../../styles/units";
+export const themeColors = (color) => {
+    const THEME_COLORS = {
+        green: COLORS.mint,
+        blue: COLORS.skyBlue,
+        purple: COLORS.lavender,
+        pink: COLORS.pink,
+        white: COLORS.white,
+    };
+    return THEME_COLORS[color] || color;
+};
+export const themeSpacing = (size) => {
+    const THEME_SPACING_SIZES = {
+        sm: THEME_SPACING.sm,
+        md: THEME_SPACING.md,
+        lg: THEME_SPACING.lg,
+        xl: THEME_SPACING.xl,
+        none: "0",
+    };
+    return THEME_SPACING_SIZES[size] || THEME_SPACING.md;
+};
+export const themeBorderRadius = (size) => {
+    const BORDER_RADIUS = {
+        sm: rem(6),
+        md: rem(8),
+        lg: rem(12),
+    };
+    return BORDER_RADIUS[size] || BORDER_RADIUS.sm;
+};
+export const themeElevation = (elevation) => {
+    const ELEVETION = {
+        0: "none",
+        1: `0 ${rem(4)} ${rem(16)} 0 rgba(0, 0, 0, 0.08)`,
+    };
+    return ELEVETION[elevation] || ELEVETION[0];
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hlf-fe/pulmo-ui",
   "private": false,
-  "version": "1.5.3",
+  "version": "1.5.4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/components/buttons/link-button/link-button.d.ts

@@ -1,25 +0,0 @@
-import { ReactNode } from "react";
-export type LinkButtonProps = {
-    type?: "button" | "reset" | "submit";
-    icon?: ReactNode;
-    className?: string;
-    inverted?: boolean;
-    disabled?: boolean;
-    onClick?: () => void;
-    btnSize?: "s" | "m" | "l";
-    fullWidth?: boolean;
-    fullWidthMobile?: boolean;
-    dataTest?: string;
-    tabIndex?: number;
-    to?: string;
-    href?: string;
-    target?: "_blank" | "_self" | "_parent" | "_top";
-    children: ReactNode;
-};
-export type StyledLinkButtonProps = {
-    inverted?: boolean;
-    btnSize?: "s" | "m" | "l";
-    fullWidthMobile?: boolean;
-    fullWidth?: boolean;
-};
-export declare const LinkButton: ({ type, onClick, className, inverted, disabled, btnSize, fullWidth, fullWidthMobile, dataTest, tabIndex, children, to, href, target, }: LinkButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/link-button/link-button.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled, { css } from "styled-components";
-import { media, buttonSize } from "../../../styles/mixins";
-import { rem } from "../../../styles/units";
-import { Link } from "gatsby";
-export const LinkButton = ({ type = "submit", onClick, className = "", inverted = false, disabled = false, btnSize = "m", fullWidth, fullWidthMobile, dataTest, tabIndex, children, to, href, target, }) => {
-    const commonProps = {
-        className,
-        onClick,
-        inverted,
-        btnSize,
-        fullWidth,
-        fullWidthMobile,
-        "data-test": dataTest,
-        tabIndex,
-    };
-    const asElement = to ? Link : href ? "a" : "button";
-    return (_jsx(StyledLinkButton, { as: asElement, ...commonProps, ...(to ? { to } : {}), ...(href
-            ? {
-                href,
-                target,
-                rel: target === "_blank" ? "noopener noreferrer" : undefined,
-            }
-            : {}), ...(!to && !href ? { type, disabled } : {}), children: children }));
-};
-const StyledLinkButton = styled.button `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: ${rem(10)};
-  font-family: ${({ theme }) => theme.valueBold};
-  font-weight: 400;
-  text-decoration: none;
-  color: ${({ theme, inverted }) => (inverted ? theme.red : theme.white)};
-  width: ${({ fullWidthMobile }) => (fullWidthMobile ? "100%" : "fit-content")};
-  background-color: ${({ theme, inverted }) => inverted ? theme.white : theme.red};
-  line-height: 2.5;
-  border-radius: ${rem(5)};
-  border-color: ${({ theme, inverted }) => inverted ? theme.red : "transparent"};
-  transition: background-color 0.3s ease-out;
-  border-style: solid;
-
-  &:disabled {
-    cursor: default;
-    opacity: 0.6;
-  }
-
-  ${({ btnSize }) => {
-    switch (btnSize) {
-        case "s":
-            return buttonSize.S;
-        case "m":
-            return buttonSize.M;
-        case "l":
-            return buttonSize.L;
-        default:
-            return buttonSize.M;
-    }
-}}
-
-  ${({ theme, inverted, fullWidth }) => css `
-    ${media.M `
-      width: ${fullWidth ? "100%" : "fit-content"};
-    `}
-
-    &:not(:disabled) {
-      ${media.L `
-        &:hover, :active, :focus-visible {
-          background-color: ${inverted ? theme.red : theme.redHover};
-          color: ${theme.white};
-        }
-
-        &:focus-visible {
-          outline: ${rem(2)} solid ${theme.blackLight};
-          outline-offset: ${rem(2)};
-        }
-      `};
-    }
-  `};
-`;

package/dist/components/buttons/link-button/link-button.stories.d.ts

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

package/dist/components/buttons/link-button/link-button.stories.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { LinkButton } from "./link-button";
-import { Decorator } from "../../../components/decorator/decorator";
-const meta = {
-    title: "Buttons/LinkButton",
-    component: LinkButton,
-    decorators: [
-        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
-    ],
-};
-export default meta;
-export const Default = {
-    args: {
-        inverted: false,
-        children: "Button Text",
-    },
-};

package/dist/components/layout/image-list/image-list.d.ts

@@ -1,6 +0,0 @@
-import { SanityImage } from '../../../models/sanity-types';
-export type ImageListProps = {
-    heading?: string;
-    images: SanityImage[];
-};
-export declare const ImageList: ({ heading, images }: ImageListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/image-list/image-list.js

@@ -1,55 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Image } from "../../../components/layout/image/image";
-import { Container } from "../../../components/layout/container/container";
-import styled from 'styled-components';
-import { media } from '../../../styles/mixins';
-import { rem } from '../../../styles/units';
-export const ImageList = ({ heading, images }) => {
-    return (_jsx(OuterContainer, { children: _jsxs(StyledContainer, { children: [heading && _jsx(Heading, { children: heading }), _jsx(LogoContainer, { children: images?.map((image, i) => {
-                        return _jsx(Image, { image: image?.asset }, `${image?.asset?.url}-${i}`);
-                    }) })] }) }));
-};
-const OuterContainer = styled.div `
-  background-color: ${({ theme }) => theme.white};
-`;
-const StyledContainer = styled(Container) `
-  margin-bottom: 0; 
-`;
-const LogoContainer = styled.div `
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-auto-rows: ${rem(110)};
-  grid-gap: ${rem(20)};
-  padding: ${rem(32)} 0 ${rem(40)};
-
-  ${media.L `
-    grid-template-columns: repeat(5, 1fr);
-    grid-auto-rows: ${rem(135)};
-    padding: ${rem(32)} 0 ${rem(48)};
-  `}
-
-  img {
-    width: 100%;
-    height: ${rem(110)};
-    border-radius: ${rem(4)};
-    box-shadow: 0 ${rem(4)} ${rem(16)} 0 rgba(0, 0, 0, 0.08);
-    padding: ${rem(10)};
-
-    ${media.L `
-      height: ${rem(135)};
-  `}
-  }
-`;
-const Heading = styled.h2 `
-  font-family: ${({ theme }) => theme.valueRegular};
-  font-size: ${rem(16)};
-  font-weight: normal;
-  color: ${({ theme }) => theme.blackLight};
-  margin: 0;
-  padding-top: ${rem(32)};
-
-  ${media.M `
-    font-size: ${rem(18)};
-    text-align: center; 
-  `}
-`;

package/dist/components/layout/image-list/image-list.stories.d.ts

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

package/dist/components/layout/image-list/image-list.stories.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ImageList } from "./image-list";
-import { Decorator } from "../../../components/decorator/decorator";
-import { svgMock } from '../../../mocks/image-mocks';
-const meta = {
-    title: "Layout/ImageList",
-    component: ImageList,
-    decorators: [
-        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
-    ],
-};
-export default meta;
-const images = Array(10).fill(svgMock);
-export const Default = {
-    args: {
-        heading: 'Lorem ipsum dolor sit amet',
-        images,
-    },
-};

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

@@ -1,6 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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.d.ts

@@ -1,8 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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/types.d.ts

@@ -1,39 +0,0 @@
-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

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

package/dist/models/sanity.types.d.ts

@@ -1,9 +0,0 @@
-import { IGatsbyImageData } from 'gatsby-plugin-image';
-export type SanityImage = {
-    asset: {
-        gatsbyImageData: IGatsbyImageData;
-        description: string;
-        url?: string;
-        extension?: string;
-    };
-};

package/dist/models/sanity.types.js

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

package/dist/models/web-page.url.d.ts

@@ -1,10 +0,0 @@
-export type WebPageUrl = {
-    externalUrl?: string;
-    openInNewWindow?: boolean;
-    internalLink?: {
-        slug?: {
-            current: string;
-        };
-    };
-    webUrlName?: string;
-};

package/dist/models/web-page.url.js

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