@hlf-fe/pulmo-ui 1.5.5 → 1.5.7

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

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

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

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

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

@@ -1,14 +1,20 @@
 import { ReactNode, CSSProperties } from "react";
-type Sizes = "sm" | "lg" | "xl";
+type Sizes = "sm" | "md" | "lg" | "xl" | "auto";
 type CSSTypes = Pick<CSSProperties, "position" | "display">;
 export type ContainerProps = {
     children: ReactNode;
     maxWidth?: Sizes;
     className?: string;
+    innerContainerWidth?: string;
+    alignBlock?: "center" | "left";
+    innerWidth?: number;
 } & CSSTypes;
 export declare const Container: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
     maxWidth?: Sizes;
     className?: string;
+    innerContainerWidth?: string;
+    alignBlock?: "center" | "left";
+    innerWidth?: number;
 } & CSSTypes & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/layout/container/container.js

@@ -1,20 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { siteWidthRow, siteWidthRowXL, siteWidthRowS } from "../../../styles/mixins";
+import { siteWidthRow, siteWidthRowMd, siteWidthRowXL, siteWidthRowS, siteWidthRowAuto, } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
 import styled from "styled-components";
 const MAX_WIDTH = {
     sm: siteWidthRowS,
+    md: siteWidthRowMd,
     lg: siteWidthRow,
     xl: siteWidthRowXL,
+    auto: siteWidthRowAuto,
+};
+const INNER_WIDTH = {
+    sm: 676,
+    md: 800,
+    lg: 1024,
+    xl: 1200,
 };
 const getMaxWidth = (size) => {
     return MAX_WIDTH?.[size];
 };
-export const Container = forwardRef(({ children, className, maxWidth = "lg", position = "static", display = "block", }, ref) => {
-    return (_jsx(Div, { ref: ref, className: className, "$maxWidth": getMaxWidth(maxWidth), display: display, position: position, children: children }));
+const getInnerWidth = (size) => {
+    return INNER_WIDTH?.[size];
+};
+export const Container = forwardRef(({ children, className, maxWidth = "lg", position = "static", display = "block", alignBlock = "center", innerWidth, }, ref) => {
+    const containerWidth = alignBlock === "left" ? "lg" : maxWidth;
+    const innerContainerWidth = alignBlock == "left" ? getInnerWidth(maxWidth) : innerWidth;
+    const content = innerContainerWidth ? (_jsx(Inner, { "$innerContainerWidth": innerContainerWidth, children: children })) : (children);
+    return (_jsx(Div, { ref: ref, className: className, "$maxWidth": getMaxWidth(containerWidth), "$display": display, "$position": position, children: content }));
 });
 const Div = styled.div `
   ${({ $maxWidth }) => $maxWidth};
-  display: ${({ display }) => display};
-  position: ${({ position }) => position};
+  display: ${({ $display }) => $display};
+  position: ${({ $position }) => $position};
+`;
+const Inner = styled.div `
+  max-width: ${({ $innerContainerWidth }) => rem($innerContainerWidth)};
 `;

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

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<typeof Container>;
 export declare const Default: Story;
 export declare const Small: Story;
+export declare const Medium: Story;
 export declare const Large: Story;
 export declare const ExtraLarge: Story;

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

@@ -33,6 +33,12 @@ export const Small = {
         children: (_jsx(PlaceholderBlock, { children: _jsx(Heading, { children: "sm" }) })),
     },
 };
+export const Medium = {
+    args: {
+        maxWidth: "md",
+        children: (_jsx(PlaceholderBlock, { children: _jsx(Heading, { children: "md" }) })),
+    },
+};
 export const Large = {
     args: {
         maxWidth: "lg",

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

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

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

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

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

@@ -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.js

@@ -9,7 +9,7 @@ export const NavigationSection = ({ section, className, closeSection }) => {
     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", {}));
+    const renderColumn = (title, items) => (items ? (_jsxs(NavCol, { children: [title && _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, i) => (_jsx(CardBanner, { ...banner, externalUrl: banner?.link?.externalUrl, internalLink: banner?.link?.internalLink?.slug?.current, onClick: closeSection }, `${banner.title.trim()}-${i}`))) })] }) }));
 };
 const Wrapper = styled.div `

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.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?.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: () => {
+    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: "127", height: "32" }) })), _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, target: ctaButton?.openInNewWindow ? "_blank" : "_self", 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);
                 } }))] }));
@@ -123,7 +123,6 @@ 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

@@ -24,7 +24,7 @@ const NavigationPanel = ({ mainMenuItems, topMenuItems, scrollToTop, closeMenu,
     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))) })] })));
+    const renderColumn = (title, items) => (items && (_jsxs(_Fragment, { children: [title && _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, i) => (_jsx(CardBanner, { ...banner, externalUrl: banner?.link?.externalUrl, internalLink: banner?.link?.internalLink?.slug?.current, onClick: closeMenu }, `${banner.title.trim()}-${i}`))) })] })] }));
 };
 const Wrapper = styled.div `

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

@@ -28,7 +28,7 @@ export const NavigationMobile = ({ logotype, mainMenuItems, topMenuItems, ctaBut
     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", marginRight: emptyMenuItems, 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 }) }))] }) }));
+    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: "95", height: "24" }) })), ctaButton && (_jsx(StyledButton, { btnSize: "s", dataTest: "nav-cta", to: ctaButton?.internalLink?.slug?.current, href: ctaButton?.externalUrl, target: ctaButton?.openInNewWindow ? "_blank" : "_self", marginRight: emptyMenuItems, 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;
@@ -64,11 +64,11 @@ const TopBar = styled.div `
 const StyledLogoLink = styled(Link) `
   display: flex;
   align-self: center;
-  max-width: ${rem(140)};
 `;
 const StyledButton = styled(Button) `
   display: flex;
   align-items: center;
+  white-space: nowrap;
   margin-left: auto;
   margin-right: ${({ marginRight }) => (marginRight ? rem(16) : 0)};
   height: ${rem(32)};

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/surfaces/cards/card-banner/card-banner.js

@@ -15,6 +15,10 @@ const Wrapper = styled(Link) `
   text-decoration: none;
   box-shadow: 0 ${rem(4)} ${rem(16)} 0 rgba(0,0,0,0.08);
   padding: ${rem(16)};
+
+  &:hover {
+    box-shadow: 0 ${rem(4)} ${rem(16)} 0 rgba(0,0,0,0.3);
+  }
 `;
 const ImageWrapper = styled.div `
   border-radius: 50%;

package/dist/index.d.ts

@@ -40,8 +40,11 @@ export declare const EmailSignupForm: import("react").FC<EmailSignupFormProps>;
 export declare const Image: import("react").FC<ImageProps>;
 export declare const Container: import("react").ForwardRefExoticComponent<{
     children: import("react").ReactNode;
-    maxWidth?: "sm" | "lg" | "xl";
+    maxWidth?: "auto" | "sm" | "md" | "lg" | "xl";
     className?: string;
+    innerContainerWidth?: string;
+    alignBlock?: "center" | "left";
+    innerWidth?: number;
 } & {
     position?: import("csstype").Property.Position | undefined;
     display?: import("csstype").Property.Display | undefined;

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

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

package/dist/models/sanity.types.js

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

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

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

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

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

package/dist/styles/mixins.d.ts

@@ -14,8 +14,10 @@ export declare const media: {
 };
 export declare const dynamicFontSize: (minFontSize: number, maxFontSize: number, minScreenWidth?: number, maxScreenWidth?: number) => string;
 export declare const siteWidthRowS: () => import("styled-components").RuleSet<object>;
+export declare const siteWidthRowMd: () => import("styled-components").RuleSet<object>;
 export declare const siteWidthRow: () => import("styled-components").RuleSet<object>;
 export declare const siteWidthRowXL: () => import("styled-components").RuleSet<object>;
+export declare const siteWidthRowAuto: () => import("styled-components").RuleSet<object>;
 export declare const fullWidthRow: () => import("styled-components").RuleSet<object>;
 export declare const fontSize: {
     XS: () => import("styled-components").RuleSet<object>;

package/dist/styles/mixins.js

@@ -79,6 +79,33 @@ export const siteWidthRowS = () => css `
     margin-bottom: ${SPACING.spacingXXL};
   `}
 `;
+export const siteWidthRowMd = () => css `
+  margin-left: ${SPACING.spacingXS};
+  margin-right: ${SPACING.spacingXS};
+  margin-bottom: ${rem(20)};
+  margin-top: ${rem(20)};
+  max-width: ${rem(800)};
+
+  ${media.XS `
+    margin-left: ${SPACING.spacingM};
+    margin-right: ${SPACING.spacingM};
+  `}
+
+  @media (min-width: ${em(800 + SPACING.blockSpacingM * 2)}) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  ${media.M `
+    margin-bottom: ${SPACING.spacingXL};
+    margin-top: ${SPACING.spacingXL};
+  `}
+
+  ${media.L `
+    margin-top: ${SPACING.spacingXXL};
+    margin-bottom: ${SPACING.spacingXXL};
+  `}
+`;
 export const siteWidthRow = () => css `
   margin-left: ${SPACING.spacingXS};
   margin-right: ${SPACING.spacingXS};
@@ -135,6 +162,9 @@ export const siteWidthRowXL = () => css `
     padding-right: ${rem(SPACING.blockSpacingM)};
   `}
 `;
+export const siteWidthRowAuto = () => css `
+  width: auto;
+`;
 export const fullWidthRow = () => css `
   padding-top: ${SPACING.spacingL};
   padding-right: ${SPACING.spacingXS};

package/dist/styles/theme.d.ts

@@ -19,6 +19,7 @@ export declare const SPACING: {
 };
 export declare const VARIABLES: {
     siteWidthS: string;
+    siteWidthM: string;
     siteWidth: string;
     siteWidthXL: string;
     siteMaxWidth: string;
@@ -123,6 +124,7 @@ export declare const THEME_SETTINGS: {
     valueMedium: string;
     valueBold: string;
     siteWidthS: string;
+    siteWidthM: string;
     siteWidth: string;
     siteWidthXL: string;
     siteMaxWidth: string;

package/dist/styles/theme.js

@@ -20,6 +20,7 @@ export const SPACING = {
 };
 export const VARIABLES = {
     siteWidthS: rem(BREAKPOINT_VALUES.S_ALT),
+    siteWidthM: rem(800 + SPACING.blockSpacingM * 2),
     siteWidth: rem(BREAKPOINT_VALUES.L + SPACING.blockSpacingM * 2),
     siteWidthXL: rem(BREAKPOINT_VALUES.XL + SPACING.blockSpacingM * 2),
     siteMaxWidth: rem(1920),

package/package.json

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

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

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

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

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

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

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

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

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

@@ -1,26 +0,0 @@
-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/portable-text/portable-text-default.d.ts

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

@@ -1,23 +0,0 @@
-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/styles/mixins/theme-mixins/theme-mixins.d.ts

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

@@ -1,37 +0,0 @@
-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];
-};