@hlf-fe/pulmo-ui 1.0.1 → 1.2.0

package/dist/components/inputs/form-error/form-error.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { rem } from "../../../styles/units";
+export const FormError = ({ errors, name, className, alignLeft, }) => {
+    const errorMessage = errors[name]?.message;
+    if (errorMessage && typeof errorMessage === "string")
+        return (_jsx(ErrorMessage, { "data-test": "form-error", className: className, alignLeft: alignLeft, children: errorMessage }));
+    return null;
+};
+const ErrorMessage = styled.span `
+  display: flex;
+  justify-content: ${({ alignLeft }) => alignLeft ? "flex-start" : "flex-end"};
+  font-family: ${({ theme }) => theme.valueBold};
+  color: ${({ theme }) => theme.red};
+  padding: ${rem(8)};
+`;

package/dist/components/inputs/form-error/form-error.stories.d.ts

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

package/dist/components/inputs/form-error/form-error.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormError } from "./form-error";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Inputs/FormError",
+    component: FormError,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        name: "fieldValue",
+        errors: {
+            // @ts-ignore
+            fieldValue: {
+                message: "validation-error-text",
+            },
+        },
+    },
+};

package/dist/components/inputs/form-label/form-label.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export type FormLabelProps = {
+    htmlFor?: string;
+    className?: string;
+    children: ReactNode;
+};
+export declare const FormLabel: ({ htmlFor, className, children }: FormLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/form-label/form-label.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { rem } from "../../../styles/units";
+export const FormLabel = ({ htmlFor, className, children }) => (_jsx(Label, { className: className, htmlFor: htmlFor, children: children }));
+const Label = styled.label `
+  display: block;
+  font-family: ${({ theme }) => theme.valueBold};
+  font-weight: 400;
+  font-size: ${rem(16)};
+  color: ${({ theme }) => theme.blackLight};
+  margin: ${rem(8)} 0;
+`;

package/dist/components/inputs/form-label/form-label.stories.d.ts

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

package/dist/components/inputs/form-label/form-label.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormLabel } from "./form-label";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Inputs/FormLabel",
+    component: FormLabel,
+    decorators: [
+        (Story) => (_jsx(Decorator, { maxWidth: "250px", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        children: "label-text",
+    },
+};

package/dist/components/inputs/text-field/text-field.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode, InputHTMLAttributes, HTMLInputTypeAttribute } from "react";
+import { UseFormRegisterReturn, FieldErrors } from "react-hook-form";
+export type TextFieldProps = {
+    dataTest?: string;
+    value?: string;
+    name?: string;
+    type?: HTMLInputTypeAttribute;
+    placeholder?: string;
+    icon?: ReactNode;
+    className?: string;
+    ariaLabel?: string;
+    ariaLabelBtn?: string;
+    ariaDescribedBy?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    register?: UseFormRegisterReturn;
+    errors?: FieldErrors;
+    inputMode?: InputHTMLAttributes<HTMLInputElement>["inputMode"];
+    pattern?: InputHTMLAttributes<HTMLInputElement>["pattern"];
+    variant?: "default" | "rounded";
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+};
+export type StyledTextFieldProps = {
+    icon?: string;
+    variant?: "default" | "rounded";
+    startAdornment?: ReactNode;
+};
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/inputs/text-field/text-field.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { FormError } from "../../../components/inputs/form-error/form-error";
+import { rem } from "../../../styles/units";
+import styled, { css } from "styled-components";
+const variantInputWrapperStyles = {
+    default: css `
+    height: ${rem(56)};
+  `,
+    rounded: css `
+    height: ${rem(48)};
+  `,
+};
+const variantInputStyles = {
+    default: css `
+    border-radius: ${rem(5)};
+  `,
+    rounded: css `
+    border-radius: ${rem(24)};
+  `,
+};
+export const TextField = forwardRef(({ dataTest, value, name, type = "text", variant = "default", placeholder, onChange, onBlur, onFocus, onKeyDown, className, ariaLabel, ariaDescribedBy, register, errors, pattern, inputMode = "text", startAdornment, endAdornment, }, ref) => {
+    return (_jsxs(InputContainer, { children: [_jsxs(InputWrapper, { className: className, variant: variant, startAdornment: startAdornment, children: [startAdornment && _jsx(StartAdornment, { children: startAdornment }), _jsx(StyledInput, { "data-test": dataTest, variant: variant, value: value, ref: ref, type: type, id: name, name: name, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, inputMode: inputMode, pattern: pattern, startAdornment: startAdornment, ...register }), endAdornment && _jsx(EndAdornment, { children: endAdornment })] }), errors && name && _jsx(FormError, { errors: errors, name: name })] }));
+});
+TextField.displayName = "TextField";
+const InputContainer = styled.div `
+  width: 100%;
+`;
+const InputWrapper = styled.div `
+  display: flex;
+  position: relative;
+  ${({ variant }) => variantInputWrapperStyles[variant]};
+`;
+const StyledInput = styled.input `
+  width: 100%;
+  font-family: ${({ theme }) => theme.valueRegular};
+  font-size: ${rem(16)};
+  background-color: ${({ theme }) => theme.white};
+  border: ${rem(1)} solid ${({ theme }) => theme.grayTransparent};
+  padding-right: ${rem(16)};
+
+  &:focus {
+    outline: none;
+    border: ${rem(1)} solid ${({ theme }) => theme.gray};
+  }
+
+  ${({ variant }) => variantInputStyles[variant]};
+  padding-left: ${({ startAdornment }) => (startAdornment ? rem(40) : rem(20))};
+`;
+const StartAdornment = styled.div `
+  position: absolute;
+  display: flex;
+  align-items: center;
+  top: 0;
+  left: ${rem(10)};
+  height: 100%;
+`;
+const EndAdornment = styled.div `
+  position: absolute;
+  display: flex;
+  align-items: center;
+  top: 0;
+  right: ${rem(15)};
+  height: 100%;
+`;

package/dist/components/inputs/text-field/text-field.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextField } from "./text-field";
+declare const meta: Meta<typeof TextField>;
+export default meta;
+type Story = StoryObj<typeof TextField>;
+export declare const Default: Story;
+export declare const Rounded: Story;
+export declare const DefaultWithStartAdornment: Story;
+export declare const DefaultWithEndAdornment: Story;
+export declare const RoundedWithStartAdornment: Story;
+export declare const RoundedWithEndAdornment: Story;

package/dist/components/inputs/text-field/text-field.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Decorator } from "../../../components/decorator/decorator";
+import { SearchIcon } from "../../../components/icons/search-icon/search-icon";
+import { TextField } from "./text-field";
+const meta = {
+    title: "Inputs/TextField",
+    component: TextField,
+    decorators: [
+        (Story) => (_jsx(Decorator, { maxWidth: "250px", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        placeholder: "placeholder",
+    },
+};
+export const Rounded = {
+    args: {
+        variant: "rounded",
+        placeholder: "placeholder",
+    },
+};
+export const DefaultWithStartAdornment = {
+    args: {
+        variant: "default",
+        placeholder: "placeholder",
+        startAdornment: _jsx(SearchIcon, { width: 26, height: 26 }),
+    },
+};
+export const DefaultWithEndAdornment = {
+    args: {
+        variant: "default",
+        placeholder: "placeholder",
+        endAdornment: _jsx(SearchIcon, { width: 26, height: 26 }),
+    },
+};
+export const RoundedWithStartAdornment = {
+    args: {
+        variant: "rounded",
+        placeholder: "placeholder",
+        startAdornment: _jsx(SearchIcon, { width: 26, height: 26 }),
+    },
+};
+export const RoundedWithEndAdornment = {
+    args: {
+        variant: "rounded",
+        placeholder: "placeholder",
+        endAdornment: _jsx(SearchIcon, { width: 26, height: 26 }),
+    },
+};

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

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+export type AccordionItemProps = {
+    heading: string;
+    panelId: string;
+    regionId: string;
+    initiallyExpanded?: boolean;
+    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 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

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+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";
+var PanelState;
+(function (PanelState) {
+    PanelState[PanelState["CLOSED"] = 0] = "CLOSED";
+    PanelState[PanelState["OPENING"] = 1] = "OPENING";
+    PanelState[PanelState["OPENED"] = 2] = "OPENED";
+    PanelState[PanelState["CLOSING"] = 3] = "CLOSING";
+})(PanelState || (PanelState = {}));
+export const AccordionItem = ({ heading, headingLevel, panelId, regionId, initiallyExpanded, children, }) => {
+    const [height, setHeight] = useState(0);
+    const [panelState, setPanelState] = useState(!initiallyExpanded ? PanelState.CLOSED : PanelState.OPENING);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (panelState === PanelState.OPENING ||
+            panelState === PanelState.CLOSING) {
+            setHeight(ref.current?.scrollHeight ?? 0);
+        }
+    }, [panelState]);
+    useEffect(() => {
+        if (height > 0 && panelState === PanelState.CLOSING) {
+            setHeight(0);
+        }
+    }, [height, panelState]);
+    const onAnimationComplete = () => {
+        if (panelState === PanelState.OPENING) {
+            setPanelState(PanelState.OPENED);
+        }
+        else if (panelState === PanelState.CLOSING) {
+            setPanelState(PanelState.CLOSED);
+        }
+    };
+    const togglePanel = () => {
+        const isClosed = panelState === PanelState.CLOSED || panelState === PanelState.CLOSING;
+        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 AccodrionContent = styled.div `
+  overflow: hidden;
+  transition: height 0.3s ease-in-out;
+  height: ${({ contentHeight }) => `${contentHeight}px`};
+  height: ${({ useAutoHeight }) => useAutoHeight && "auto"};
+`;
+const Content = styled.div `
+  padding: ${rem(15)} 0;
+  padding-top: 0;
+
+  ${media.M `
+    padding: ${rem(25)} 0;
+    padding-top: 0;
+  `}
+`;
+const AccordionPanel = styled.div `
+  position: relative;
+`;
+const StyledHeading = styled.h2 `
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  border-top: 1px solid rgba(51, 51, 51, 0.2);
+`;
+const Text = styled.span `
+  font-size: ${rem(18)};
+  cursor: pointer;
+  ${media.M `
+   font-size: ${rem(20)};
+    `}
+`;
+const StyledButton = styled.button `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  font-weight: 400;
+  line-height: ${rem(24)};
+  font-size: ${rem(16)};
+  padding: ${rem(15)} 0;
+  background-color: transparent;
+  border: none;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `}
+
+  ${media.M `
+    line-height: ${rem(26)};
+    font-size: ${rem(18)};
+    padding: ${rem(25)} 0;
+  `}
+`;
+const StyledToggablePlusMinusIcon = styled(ToggablePlusMinusIcon) `
+  cursor: pointer;
+  margin-left: auto;
+  margin-right: ${rem(10)};
+`;
+export const Accordion = styled.div `
+  border-bottom: 1px solid rgba(51, 51, 51, 0.2);
+  width: 100%;
+
+  ${({ disabled }) => disabled &&
+    css `
+      pointer-events: none;
+      opacity: 0.5;
+      user-select: none;
+    `};
+`;

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion, AccordionItem } from "./accordion";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Layout/Accordion",
+    component: Accordion,
+    decorators: [
+        (Story) => (_jsx(Decorator, { maxWidth: "800px", children: _jsx(Story, {}) })),
+    ],
+};
+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." })] })),
+};

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

@@ -0,0 +1,10 @@
+import { ReactNode, CSSProperties } from "react";
+type Sizes = "sm" | "lg" | "xl";
+type CSSTypes = Pick<CSSProperties, "position" | "display">;
+export type ContainerProps = {
+    children: ReactNode;
+    maxWidth?: Sizes;
+    className?: string;
+} & CSSTypes;
+export declare const Container: ({ children, className, maxWidth, position, display, }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { siteWidthRow, siteWidthRowXL, siteWidthRowS } from "../../../styles/mixins";
+import styled from "styled-components";
+const MAX_WIDTH = {
+    sm: siteWidthRowS,
+    lg: siteWidthRow,
+    xl: siteWidthRowXL,
+};
+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 }));
+};
+const Div = styled.div `
+  ${({ maxWidth }) => maxWidth};
+  display: ${({ display }) => display};
+  position: ${({ position }) => position};
+`;

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Container } from "./container";
+declare const meta: Meta<typeof Container>;
+export default meta;
+type Story = StoryObj<typeof Container>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const ExtraLarge: Story;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container } from "./container";
+import styled from "styled-components";
+import { rem } from "../../../styles/units";
+const meta = {
+    title: "Layout/Container",
+    component: Container,
+    decorators: [(Story) => _jsx(Story, {})],
+};
+export default meta;
+const PlaceholderBlock = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #d6ebe3;
+  width: 100%;
+  height: ${rem(300)};
+  color: #333;
+  border-radius: ${rem(10)};
+`;
+const Heading = styled.h1 `
+  font-size: ${rem(52)};
+`;
+export const Default = {
+    args: {
+        maxWidth: "lg",
+        children: (_jsx(PlaceholderBlock, { children: _jsx(Heading, { children: "lg" }) })),
+    },
+};
+export const Small = {
+    args: {
+        maxWidth: "sm",
+        children: (_jsx(PlaceholderBlock, { children: _jsx(Heading, { children: "sm" }) })),
+    },
+};
+export const Large = {
+    args: {
+        maxWidth: "lg",
+        children: (_jsx(PlaceholderBlock, { children: _jsx(Heading, { children: "lg" }) })),
+    },
+};
+export const ExtraLarge = {
+    args: {
+        maxWidth: "xl",
+        children: (_jsx(PlaceholderBlock, { children: _jsx(Heading, { children: "xl" }) })),
+    },
+};

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

@@ -0,0 +1,22 @@
+import { IGatsbyImageData } from "gatsby-plugin-image";
+export type ImageProps = {
+    image: {
+        description: string;
+        gatsbyImageData: IGatsbyImageData;
+        url?: string;
+        extension?: string;
+    };
+    imageSmall?: {
+        description?: string;
+        gatsbyImageData?: IGatsbyImageData;
+    };
+    className?: string;
+    imgClassName?: string;
+    width?: string;
+    height?: string;
+    bpSmallDevice?: number;
+    objectPosition?: string;
+    onLoad?: () => void;
+    loading?: "eager" | "lazy";
+};
+export declare const Image: ({ image, imageSmall, className, imgClassName, width, height, bpSmallDevice, objectPosition, loading, onLoad, }: ImageProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GatsbyImage, getImage, withArtDirection, } from "gatsby-plugin-image";
+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 contentType = image?.extension;
+    const fileUrl = image?.url;
+    const gatsbyImageData = getImage(image?.gatsbyImageData);
+    const gatsbyImageDataSmall = imageSmall?.gatsbyImageData
+        ? getImage(imageSmall?.gatsbyImageData)
+        : false;
+    const images = gatsbyImageData && gatsbyImageDataSmall
+        ? withArtDirection(gatsbyImageData, [
+            {
+                media: `(max-width: ${em(bpSmallDevice - 1)})`,
+                image: gatsbyImageDataSmall,
+            },
+        ])
+        : gatsbyImageData;
+    if (contentType === SVG && fileUrl)
+        return (_jsx("img", { width: width, height: height, className: className, src: fileUrl, alt: desc }));
+    if (images)
+        return (_jsx(GatsbyImage, { className: className, imgClassName: imgClassName, image: images, loading: loading, alt: desc ?? "", objectPosition: objectPosition, onLoad: onLoad }));
+    return null;
+};

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

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

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from "./image";
+import { Decorator } from "../../../components/decorator/decorator";
+// @ts-ignore
+import placeholderImage from "assets/placeholder-img.png";
+const mockGatsbyImageData = {
+    layout: "constrained",
+    images: {
+        fallback: {
+            src: placeholderImage,
+            srcSet: `${placeholderImage} 1x`,
+            sizes: "(min-width: 600px) 600px, 100vw",
+        },
+    },
+    width: 600,
+    height: 400,
+};
+const meta = {
+    title: "Layout/Image",
+    component: Image,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        image: {
+            description: "Exempelbild",
+            gatsbyImageData: mockGatsbyImageData,
+        },
+    },
+};

package/dist/components/modules/email-signup-form/email-signup-form.d.ts

@@ -0,0 +1,16 @@
+export type EmailSignupFormProps = {
+    heading?: string;
+    description?: string;
+    localeText: {
+        emailLabel: string;
+        sendButtonText: string;
+        successMessage?: string;
+        errorMessage?: string;
+    };
+    onSubmit: (email: string) => void;
+    onReset?: () => void;
+    loading: boolean;
+    success: boolean;
+    failed: boolean;
+};
+export declare const EmailSignupForm: ({ heading, description, localeText, onSubmit, loading, success, failed, }: EmailSignupFormProps) => import("react/jsx-runtime").JSX.Element;