@hlf-fe/pulmo-ui 1.2.0 → 1.4.0

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

@@ -6,5 +6,9 @@ export type ContainerProps = {
     maxWidth?: Sizes;
     className?: string;
 } & CSSTypes;
-export declare const Container: ({ children, className, maxWidth, position, display, }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Container: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+    maxWidth?: Sizes;
+    className?: string;
+} & CSSTypes & import("react").RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { siteWidthRow, siteWidthRowXL, siteWidthRowS } from "../../../styles/mixins";
 import styled from "styled-components";
 const MAX_WIDTH = {
@@ -9,9 +10,9 @@ const MAX_WIDTH = {
 const getMaxWidth = (size) => {
     return MAX_WIDTH?.[size];
 };
-export const Container = ({ children, className, maxWidth = "lg", position = "static", display = "block", }) => {
-    return (_jsx(Div, { className: className, maxWidth: getMaxWidth(maxWidth), display: display, position: position, children: children }));
-};
+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 Div = styled.div `
   ${({ maxWidth }) => maxWidth};
   display: ${({ display }) => display};

package/dist/components/modules/entry-list/entry-list.d.ts

@@ -4,6 +4,7 @@ export type EntryListProps = {
 };
 export type EntryListItemProps = {
     children: React.ReactNode;
+    as?: "div" | "li";
 };
 export type EntryListHeadingProps = {
     children: React.ReactNode;
@@ -22,6 +23,6 @@ export type EntryListTextProps = {
     color?: string;
 };
 export declare const EntryList: ({ children }: EntryListProps) => import("react/jsx-runtime").JSX.Element;
-export declare const EntryListItem: ({ children }: EntryListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EntryListItem: ({ children, as }: EntryListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const EntryListText: ({ children, fontSizeMobile, fontSizeDesktop, breakpoint, bold, as, color, }: EntryListTextProps) => import("react/jsx-runtime").JSX.Element;
 export declare const EntryListHeading: ({ children, fontSizeMobile, fontSizeDesktop, as, breakpoint, }: EntryListHeadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/modules/entry-list/entry-list.js

@@ -5,8 +5,8 @@ import { media } from "../../../styles/mixins";
 export const EntryList = ({ children }) => {
     return _jsx(List, { children: children });
 };
-export const EntryListItem = ({ children }) => {
-    return _jsx(ListItem, { children: children });
+export const EntryListItem = ({ children, as = "li" }) => {
+    return _jsx(ListItem, { as: as, children: children });
 };
 export const EntryListText = ({ children, fontSizeMobile = 14, fontSizeDesktop = 16, breakpoint = "M", bold = false, as = "p", color, }) => {
     return (_jsx(Text, { as: as, fontSizeMobile: fontSizeMobile, fontSizeDesktop: fontSizeDesktop, breakpoint: breakpoint, bold: bold, color: color, children: children }));

package/dist/components/surfaces/paper/paper.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { THEME_COLORS_BY_HEX, THEME_COLORS_BY_NAME, THEME_ELEVATION, SIZE_SM, SIZE_MD, SIZE_LG } from "../../../models/theme";
+export type PaperProps = {
+    children: ReactNode;
+    className?: string;
+    backgroundColor?: THEME_COLORS_BY_NAME | THEME_COLORS_BY_HEX;
+    borderRadius?: SIZE_SM | SIZE_MD | SIZE_LG;
+    elevation?: THEME_ELEVATION;
+};
+export declare const Paper: ({ className, children, backgroundColor, borderRadius, elevation, }: PaperProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/surfaces/paper/paper.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Paper } from "./paper";
+declare const meta: Meta<typeof Paper>;
+export default meta;
+type Story = StoryObj<typeof Paper>;
+export declare const Default: Story;
+export declare const Purple: Story;
+export declare const Green: Story;
+export declare const Blue: Story;
+export declare const Pink: Story;
+export declare const Yellow: Story;
+export declare const WhiteWithElevation: Story;

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Paper } from "./paper";
+import { Decorator } from "../../../components/decorator/decorator";
+import { EntryListHeading, EntryListText, } from "../../../components/modules/entry-list/entry-list";
+const meta = {
+    title: "Surfaces/Paper",
+    component: Paper,
+    decorators: [
+        (Story) => (_jsx(Decorator, { maxWidth: "400px", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const DummyContent = () => (_jsxs("div", { style: { padding: "20px" }, children: [_jsx(EntryListText, { fontSizeDesktop: 14, color: "#545454", children: "2025-05-11" }), _jsx(EntryListHeading, { children: "In volutpat est eu dolor efficitur" }), _jsxs(EntryListText, { children: [_jsxs(EntryListText, { as: "span", fontSizeMobile: 12, fontSizeDesktop: 14, children: ["Nulla facilisi:", " "] }), _jsx(EntryListText, { as: "span", fontSizeMobile: 12, fontSizeDesktop: 14, bold: true, children: "volutpat, XiO, MD, Condimentum Ultricies" })] }), _jsx(EntryListText, { children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper elit. Praesent mattis arcu ante, in gravida eros pharetra sit amet." }), _jsx(EntryListText, { children: "Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." })] }));
+export const Default = {
+    args: {
+        backgroundColor: "white",
+        elevation: 0,
+        borderRadius: "md",
+    },
+    render: (args) => (_jsx(Paper, { ...args, children: _jsx(DummyContent, {}) })),
+};
+export const Purple = {
+    args: {
+        backgroundColor: "purple",
+        elevation: 0,
+        borderRadius: "md",
+    },
+    render: (args) => (_jsx(Paper, { ...args, children: _jsx(DummyContent, {}) })),
+};
+export const Green = {
+    args: {
+        backgroundColor: "green",
+        elevation: 0,
+        borderRadius: "md",
+    },
+    render: (args) => (_jsx(Paper, { ...args, children: _jsx(DummyContent, {}) })),
+};
+export const Blue = {
+    args: {
+        backgroundColor: "blue",
+        elevation: 0,
+        borderRadius: "md",
+    },
+    render: (args) => (_jsx(Paper, { ...args, children: _jsx(DummyContent, {}) })),
+};
+export const Pink = {
+    args: {
+        backgroundColor: "pink",
+        elevation: 0,
+        borderRadius: "md",
+    },
+    render: (args) => (_jsx(Paper, { ...args, children: _jsx(DummyContent, {}) })),
+};
+export const Yellow = {
+    args: {
+        backgroundColor: "yellow",
+        elevation: 0,
+        borderRadius: "md",
+    },
+    render: (args) => (_jsx(Paper, { ...args, children: _jsx(DummyContent, {}) })),
+};
+export const WhiteWithElevation = {
+    args: {
+        backgroundColor: "white",
+        elevation: 1,
+        borderRadius: "md",
+    },
+    render: (args) => (_jsx(Paper, { ...args, children: _jsx(DummyContent, {}) })),
+};

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.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/headings/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/headings/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/headings/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/link/link.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+export type LinkProps = {
+    className?: string;
+    value: {
+        reference: {
+            internalLink?: {
+                slug?: {
+                    current: string;
+                };
+            };
+            externalUrl?: string;
+            openInNewWindow?: boolean;
+        };
+    };
+    children: ReactNode;
+};
+export declare const Link: ({ value, children, className }: LinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/typography/link/link.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link as GatsbyLink } from "gatsby";
+import styled from "styled-components";
+import { linkStyling } from "../../../styles/mixins";
+export const Link = ({ value, children, className }) => {
+    const link = value?.reference;
+    const slug = link?.internalLink?.slug?.current;
+    const externalUrl = link?.externalUrl;
+    const openInNewWindow = link?.openInNewWindow;
+    if (externalUrl) {
+        return (_jsx(ExternalLink, { href: externalUrl, target: openInNewWindow ? "_blank" : "_self", rel: "noreferrer", className: className, children: children }));
+    }
+    if (slug) {
+        return (_jsx(StyledLink, { to: slug, className: className, children: children }));
+    }
+    return null;
+};
+const ExternalLink = styled.a `
+  ${linkStyling({ fontSizeDesktop: 18 })}
+`;
+const StyledLink = styled(GatsbyLink) `
+  ${linkStyling({ fontSizeDesktop: 18 })}
+`;

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Link } from "./link";
+declare const meta: Meta<typeof Link>;
+export default meta;
+type Story = StoryObj<typeof Link>;
+export declare const ExternalLink: Story;
+export declare const InternalLink: Story;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link } from "./link";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Typography/Link",
+    component: Link,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const ExternalLink = {
+    name: "External Link",
+    render: () => (_jsx(Link, { value: {
+            reference: {
+                externalUrl: "https://example.com",
+                openInNewWindow: true,
+            },
+        }, children: "External Link" })),
+};
+export const InternalLink = {
+    name: "Internal Link",
+    render: () => (_jsx(Link, { value: {
+            reference: {
+                internalLink: {
+                    slug: { current: "/about" },
+                },
+            },
+        }, children: "Internal Link" })),
+};

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

@@ -0,0 +1,2 @@
+export declare const UnorderedList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const OrderedList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>> & string;

package/dist/components/typography/list/list.js

@@ -0,0 +1,32 @@
+import { media } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
+import styled from "styled-components";
+export const UnorderedList = styled.ul `
+  font-size: ${rem(16)};
+  line-height: 1.5;
+  color: ${({ theme }) => theme.blackLight};
+  padding-left: ${rem(20)};
+
+  ${media.L `
+      font-size: ${rem(18)};
+      line-height: 1.44;
+  `}
+  li {
+    margin-bottom: ${rem(8)};
+  }
+`;
+export const OrderedList = styled.ol `
+  font-size: ${rem(16)};
+  line-height: 1.5;
+  color: ${({ theme }) => theme.blackLight};
+  padding-left: ${rem(20)};
+
+  ${media.L `
+      font-size: ${rem(18)};
+      line-height: 1.44;
+  `}
+
+  li {
+    margin-bottom: ${rem(8)};
+  }
+`;

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

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const Unordered: StoryObj;
+export declare const Ordered: StoryObj;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UnorderedList, OrderedList } from "./list";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Typography/Lists",
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Unordered = {
+    name: "Unordered List",
+    render: () => (_jsxs(UnorderedList, { children: [_jsx("li", { children: "First item" }), _jsx("li", { children: "Second item" }), _jsx("li", { children: "Third item" })] })),
+};
+export const Ordered = {
+    name: "Ordered List",
+    render: () => (_jsxs(OrderedList, { children: [_jsx("li", { children: "First item" }), _jsx("li", { children: "Second item" }), _jsx("li", { children: "Third item" })] })),
+};

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

@@ -0,0 +1,9 @@
+export type PortableTextComponent = {
+    [key: string]: (props: any) => JSX.Element;
+};
+export type PortableTextComponents = {
+    marks?: PortableTextComponent;
+    list?: PortableTextComponent;
+    block?: PortableTextComponent;
+};
+export declare const PortableTextComponentDefault: PortableTextComponents;

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { withDefaultTheme } from "../../../hoc/withDefaultTheme";
+import { Link as LinkComponent, } from "../../../components/typography/link/link";
+import { H1 as H1Component, H2 as H2Component, H3 as H3Component, H4 as H4Component, } from "../../../components/typography/headings/headings";
+import { NormalText as NormalTextComponent, LeadParagraph as LeadParagraphComponent, BoldText as BoldTextComponent, ItalicText as ItalicTextComponent, } from "../../../components/typography/text/text";
+import { OrderedList as OrderedListComponent, UnorderedList as UnorderedListComponent, } from "../../../components/typography/list/list";
+const Link = withDefaultTheme(LinkComponent);
+const H1 = withDefaultTheme(H1Component);
+const H2 = withDefaultTheme(H2Component);
+const H3 = withDefaultTheme(H3Component);
+const H4 = withDefaultTheme(H4Component);
+const NormalText = withDefaultTheme(NormalTextComponent);
+const LeadParagraph = withDefaultTheme(LeadParagraphComponent);
+const BoldText = withDefaultTheme(BoldTextComponent);
+const ItalicText = withDefaultTheme(ItalicTextComponent);
+const OrderedList = withDefaultTheme(OrderedListComponent);
+const UnorderedList = withDefaultTheme(UnorderedListComponent);
+export const PortableTextComponentDefault = {
+    marks: {
+        link: ({ value, children }) => _jsx(Link, { value: value, children: children }),
+        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/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/components/typography/text/text.d.ts

@@ -0,0 +1,4 @@
+export declare const NormalText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const LeadParagraph: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const BoldText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const ItalicText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

package/dist/components/typography/text/text.js

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import { media } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
+export const NormalText = styled.p `
+  font-size: ${rem(16)};
+  line-height: 1.5;
+  color: ${({ theme }) => theme.blackLight};
+
+  ${media.L `
+      font-size: ${rem(18)};
+      line-height: 1.44;
+  `}
+`;
+export const LeadParagraph = styled.p `
+  font-size: ${rem(20)};
+  line-height: 1.4;
+  color: ${({ theme }) => theme.blackLight};
+
+  ${media.L `
+    font-size: ${rem(28)};
+    line-height: 1.43;
+  `}
+`;
+export const BoldText = styled.strong `
+  font-family: ${({ theme }) => theme.valueBold};
+  font-size: ${rem(16)};
+  line-height: 1.5;
+  color: ${({ theme }) => theme.blackLight};
+
+  ${media.L `
+      font-size: ${rem(18)};
+      line-height: 1.44;
+  `}
+`;
+export const ItalicText = styled.i `
+  font-size: ${rem(16)};
+  line-height: 1.5;
+  font-style: italic;
+  color: ${({ theme }) => theme.blackLight};
+
+  ${media.L `
+      font-size: ${rem(18)};
+      line-height: 1.44;
+  `}
+`;

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const Normal: StoryObj;
+export declare const Lead: StoryObj;
+export declare const Bold: StoryObj;
+export declare const Italic: StoryObj;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NormalText, LeadParagraph, BoldText, ItalicText } from "./text";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Typography/Text",
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Normal = {
+    name: "Normal Text",
+    render: () => (_jsx(NormalText, { children: "This is a normal paragraph of body text." })),
+};
+export const Lead = {
+    name: "Lead Paragraph",
+    render: () => (_jsx(LeadParagraph, { children: "This is a lead paragraph to emphasize an introduction or key message." })),
+};
+export const Bold = {
+    name: "Bold Text",
+    render: () => (_jsxs(NormalText, { children: ["Some text with ", _jsx(BoldText, { children: "bold emphasis" }), " inside."] })),
+};
+export const Italic = {
+    name: "Italic Text",
+    render: () => (_jsxs(NormalText, { children: ["Some text with ", _jsx(ItalicText, { children: "italic styling" }), " for nuance."] })),
+};

package/dist/index.d.ts

@@ -16,7 +16,10 @@ import { type AccordionItemProps } from "./components/layout/accordion/accordion
 import { type NavigationCellProps } from "./components/navigation/nav-cell/nav-cell";
 import { type NavigationItemProps } from "./components/navigation/nav-item/nav-item";
 import { type CardBannerProps } from "./components/surfaces/cards/card-banner/card-banner";
-export type { ButtonProps, LoadingButtonProps, TextButtonProps, EmailSignupFormProps, ImageProps, ContainerProps, AlertProps, EntryListHeadingProps, EntryListTextProps, PaginationProps, NavigationCellProps, NavigationItemProps, CardBannerProps };
+import { type PaperProps } from "./components/surfaces/paper/paper";
+import { type LinkProps } from "./components/typography/link/link";
+import { PortableTextComponentDefault } from "./components/typography/portable-text/portable-text-component-default";
+export type { ButtonProps, LoadingButtonProps, TextButtonProps, EmailSignupFormProps, ImageProps, ContainerProps, AlertProps, EntryListHeadingProps, EntryListTextProps, PaginationProps, NavigationCellProps, NavigationItemProps, CardBannerProps, PaperProps, };
 export { CloseIcon } from "./components/icons/close-icon/close-icon";
 export { ExclamationMarkIcon } from "./components/icons/exclamation-mark-icon/exclamation-mark-icon";
 export { WarningIcon } from "./components/icons/warning-icon/warning-icon";
@@ -49,3 +52,16 @@ export declare const AccordionItem: import("react").FC<AccordionItemProps>;
 export declare const NavigationCell: import("react").FC<NavigationCellProps>;
 export declare const NavigationItem: import("react").FC<NavigationItemProps>;
 export declare const CardBanner: import("react").FC<CardBannerProps>;
+export declare const Paper: import("react").FC<PaperProps>;
+export declare const Link: import("react").FC<LinkProps>;
+export declare const H1: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>;
+export declare const H2: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>;
+export declare const H3: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>;
+export declare const H4: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>;
+export declare const NormalText: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>;
+export declare const LeadParagraph: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>;
+export declare const BoldText: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>;
+export declare const ItalicText: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>;
+export declare const OrderedList: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>>;
+export declare const UnorderedList: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>;
+export { PortableTextComponentDefault };

package/dist/index.js

@@ -19,6 +19,12 @@ import { Accordion as AccordionComponent, AccordionItem as AccordionItemComponen
 import { NavigationCell as NavigationCellComponent, } from "./components/navigation/nav-cell/nav-cell";
 import { NavigationItem as NavigationItemComponent, } from "./components/navigation/nav-item/nav-item";
 import { CardBanner as CardBannerComponent, } from "./components/surfaces/cards/card-banner/card-banner";
+import { Paper as PaperComponent, } from "./components/surfaces/paper/paper";
+import { Link as LinkComponent, } from "./components/typography/link/link";
+import { H1 as H1Component, H2 as H2Component, H3 as H3Component, H4 as H4Component, } from "./components/typography/headings/headings";
+import { NormalText as NormalTextComponent, LeadParagraph as LeadParagraphComponent, BoldText as BoldTextComponent, ItalicText as ItalicTextComponent, } from "./components/typography/text/text";
+import { OrderedList as OrderedListComponent, UnorderedList as UnorderedListComponent, } from "./components/typography/list/list";
+import { PortableTextComponentDefault } from "./components/typography/portable-text/portable-text-component-default";
 // Icons
 export { CloseIcon } from "./components/icons/close-icon/close-icon";
 export { ExclamationMarkIcon } from "./components/icons/exclamation-mark-icon/exclamation-mark-icon";
@@ -51,3 +57,17 @@ export const AccordionItem = withDefaultTheme(AccordionItemComponent);
 export const NavigationCell = withDefaultTheme(NavigationCellComponent);
 export const NavigationItem = withDefaultTheme(NavigationItemComponent);
 export const CardBanner = withDefaultTheme(CardBannerComponent);
+export const Paper = withDefaultTheme(PaperComponent);
+export const Link = withDefaultTheme(LinkComponent);
+export const H1 = withDefaultTheme(H1Component);
+export const H2 = withDefaultTheme(H2Component);
+export const H3 = withDefaultTheme(H3Component);
+export const H4 = withDefaultTheme(H4Component);
+export const NormalText = withDefaultTheme(NormalTextComponent);
+export const LeadParagraph = withDefaultTheme(LeadParagraphComponent);
+export const BoldText = withDefaultTheme(BoldTextComponent);
+export const ItalicText = withDefaultTheme(ItalicTextComponent);
+export const OrderedList = withDefaultTheme(OrderedListComponent);
+export const UnorderedList = withDefaultTheme(UnorderedListComponent);
+// Configs
+export { PortableTextComponentDefault };

package/dist/models/theme.d.ts

@@ -0,0 +1,23 @@
+export type THEME_COLOR_HEX_PURPLE = "#e6d1e5";
+export type THEME_COLOR_HEX_GREEN = "#d6ebe3";
+export type THEME_COLOR_HEX_BLUE = "#d1e4ed";
+export type THEME_COLOR_HEX_PINK = "#fbdfd9";
+export type THEME_COLOR_HEX_WHITE = "#ffffff";
+export type THEME_COLORS_YELLOW = "#ffecc4";
+export type THEME_COLORS_TRANSPARENT = "transparent";
+export type THEME_COLOR_PURPLE = "purple";
+export type THEME_COLOR_GREEN = "green";
+export type THEME_COLOR_BLUE = "blue";
+export type THEME_COLOR_PINK = "pink";
+export type THEME_COLOR_WHITE = "white";
+export type THEME_COLOR_YELLOW = "yellow";
+export type THEME_COLOR_TRANSPARENT = "transparent";
+export type SIZE_NONE = "none";
+export type SIZE_SM = "sm";
+export type SIZE_MD = "md";
+export type SIZE_LG = "lg";
+export type SIZE_XL = "xl";
+export type SIZES = SIZE_NONE | SIZE_SM | SIZE_MD | SIZE_LG | SIZE_XL;
+export type THEME_ELEVATION = 0 | 1;
+export type THEME_COLORS_BY_HEX = THEME_COLOR_HEX_PURPLE | THEME_COLOR_HEX_GREEN | THEME_COLOR_HEX_BLUE | THEME_COLOR_HEX_PINK | THEME_COLOR_HEX_WHITE | THEME_COLORS_YELLOW | THEME_COLORS_TRANSPARENT;
+export type THEME_COLORS_BY_NAME = THEME_COLOR_PURPLE | THEME_COLOR_GREEN | THEME_COLOR_BLUE | THEME_COLOR_PINK | THEME_COLOR_WHITE | THEME_COLOR_YELLOW | THEME_COLOR_TRANSPARENT;

package/dist/models/theme.js

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

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/dist/styles/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) => any;
+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.js

@@ -0,0 +1,38 @@
+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,
+        yellow: COLORS.yellowLight,
+    };
+    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/dist/styles/mixins.d.ts

@@ -45,6 +45,7 @@ export declare const buttonLinkStyling: {
     inverted: () => import("styled-components").RuleSet<object>;
     text: () => import("styled-components").RuleSet<object>;
 };
-export declare const linkStyling: ({ fontSize }: {
+export declare const linkStyling: ({ fontSize, fontSizeDesktop }: {
     fontSize?: number;
+    fontSizeDesktop?: number;
 }) => import("styled-components").RuleSet<object>;

package/dist/styles/mixins.js

@@ -339,11 +339,11 @@ export const buttonLinkStyling = {
     }
   `,
 };
-export const linkStyling = ({ fontSize = 16 }) => css `
+export const linkStyling = ({ fontSize = 16, fontSizeDesktop = 18 }) => css `
   font-family: ${({ theme }) => theme.valueBold};
   color: ${({ theme }) => theme.redClear};
   font-size: ${rem(fontSize)};
-  line-height: ${rem(22)};
+  line-height: normal;
   font-weight: 400;
   text-decoration: underline;
   outline-offset: ${rem(2)};
@@ -354,4 +354,8 @@ export const linkStyling = ({ fontSize = 16 }) => css `
     color: ${({ theme }) => theme.redHover};
     text-decoration: none;
   }
+
+  ${media.L `
+      font-size: ${rem(fontSizeDesktop)};
+  `}
 `;

package/package.json

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