@hlf-fe/pulmo-ui 1.0.1 → 1.2.0

package/dist/components/modules/email-signup-form/email-signup-form.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+import { TextField } from "../../../components/inputs/text-field/text-field";
+import { LoadingButton } from "../../../components/buttons/loading-button/loading-button";
+import { FormLabel } from "../../../components/inputs/form-label/form-label";
+import { Alert } from "../../../components/feedback/alert/alert";
+import styled from "styled-components";
+import { media } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
+const schema = yup.object({
+    email: yup.string().email().required(),
+});
+export const EmailSignupForm = ({ heading, description, localeText, onSubmit, loading, success, failed, }) => {
+    const { emailLabel, sendButtonText, successMessage, errorMessage } = localeText;
+    const { register, handleSubmit, formState: { errors }, } = useForm({
+        mode: "onChange",
+        resolver: yupResolver(schema),
+    });
+    return (_jsx(Container, { children: !success ? (_jsxs(Box, { children: [heading && _jsx(Heading, { children: heading }), description && _jsx(Text, { children: description }), _jsx(FormLabel, { htmlFor: "email", children: emailLabel }), _jsxs(TextFieldAndButton, { children: [_jsx(TextField, { type: "email", name: "email", errors: errors, register: register("email") }), _jsx(StyledLoadingButton, { onClick: handleSubmit(({ email }) => onSubmit(email)), children: sendButtonText, disabled: loading, loading: loading, btnSize: "l", fullWidthMobile: true })] }), failed && _jsx(StyledAlert, { severity: "error", children: errorMessage })] })) : (_jsx(BoxCenter, { children: _jsx(Heading, { children: successMessage }) })) }));
+};
+const Container = styled.form ``;
+const TextFieldAndButton = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  ${media.L `
+    flex-direction: row;
+  `}
+`;
+const Box = styled.div ``;
+const BoxCenter = styled(Box) `
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+const Heading = styled.h2 `
+  font-family: ${({ theme }) => theme.valueBold};
+  font-size: ${rem(32)};
+  color: ${({ theme }) => theme.blackLight};
+  line-height: 1.5;
+  margin: 0;
+`;
+const Text = styled.p `
+  color: ${({ theme }) => theme.blackLight};
+  font-size: ${rem(18)};
+`;
+const StyledAlert = styled(Alert) `
+  margin-top: ${rem(15)};
+`;
+const StyledLoadingButton = styled(LoadingButton) `
+  width: 100%;
+  margin-top: ${rem(15)};
+
+  ${media.L `
+    margin-left: ${rem(15)};
+    margin-top: 0;
+    width: auto;
+  `}
+`;

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EmailSignupForm } from "./email-signup-form";
+declare const meta: Meta<typeof EmailSignupForm>;
+export default meta;
+type Story = StoryObj<typeof EmailSignupForm>;
+export declare const Default: Story;
+export declare const Loading: Story;
+export declare const Error: Story;
+export declare const Success: Story;

package/dist/components/modules/email-signup-form/email-signup-form.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmailSignupForm } from "./email-signup-form";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Modules/EmailSignupForm",
+    component: EmailSignupForm,
+    decorators: [
+        (Story) => (_jsx(Decorator, { maxWidth: "600px", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const baseArgs = {
+    heading: "Fusce dapibus mollis orci, at lobortis nisi mattis eget",
+    description: "Sed in tellus ex. Integer eget placerat nulla, eu tincidunt orci. Morbi erat sapien, laoreet eget commodo vel, consectetur vitae arcu.",
+    localeText: {
+        emailLabel: "Your email address",
+        sendButtonText: "Subscribe",
+        successMessage: "Thank you for subscribing!",
+        goBackText: "Back to form",
+        errorMessage: undefined,
+    },
+    loading: false,
+    success: false,
+    onSubmit: (email) => alert(`Submitted: ${email}`),
+    onReset: () => alert("Reset"),
+};
+export const Default = {
+    args: baseArgs,
+};
+export const Loading = {
+    args: {
+        ...baseArgs,
+        loading: true,
+    },
+};
+export const Error = {
+    args: {
+        ...baseArgs,
+        localeText: {
+            ...baseArgs.localeText,
+            errorMessage: "Something went wrong. Please try again.",
+        },
+        failed: true,
+    },
+};
+export const Success = {
+    args: {
+        ...baseArgs,
+        success: true,
+    },
+};

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

@@ -0,0 +1,27 @@
+import { media } from "../../../styles/mixins";
+export type EntryListProps = {
+    children: React.ReactNode;
+};
+export type EntryListItemProps = {
+    children: React.ReactNode;
+};
+export type EntryListHeadingProps = {
+    children: React.ReactNode;
+    fontSizeMobile?: number;
+    fontSizeDesktop?: number;
+    breakpoint?: keyof typeof media;
+    as?: "h2" | "h3";
+};
+export type EntryListTextProps = {
+    children: React.ReactNode;
+    fontSizeMobile?: number;
+    fontSizeDesktop?: number;
+    breakpoint?: keyof typeof media;
+    as?: "span" | "p";
+    bold?: boolean;
+    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 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

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { rem } from "../../../styles/units";
+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 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 }));
+};
+export const EntryListHeading = ({ children, fontSizeMobile = 18, fontSizeDesktop = 20, as = "h2", breakpoint = "M", }) => {
+    return (_jsx(Heading, { as: as, fontSizeMobile: fontSizeMobile, fontSizeDesktop: fontSizeDesktop, breakpoint: breakpoint, children: children }));
+};
+const List = styled.ul `
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+const ListItem = styled.li `
+  border-bottom: 1px solid #e9e9e9;
+  padding: 20px 0;
+  &:first-of-type {
+    border-top: 1px solid #e9e9e9;
+  }
+`;
+const responsiveFont = css `
+  font-size: ${({ fontSizeMobile }) => rem(fontSizeMobile)};
+
+  ${({ fontSizeDesktop, breakpoint }) => media[breakpoint] `
+    font-size: ${rem(fontSizeDesktop)};
+  `}
+`;
+const Heading = styled.h2 `
+  font-family: ${({ theme }) => theme.valueBold};
+  color: ${({ theme }) => theme.blackLight};
+  margin-top: 0;
+  ${responsiveFont}
+`;
+const Text = styled.p `
+  color: ${({ theme, color }) => (color ? color : theme.blackLight)};
+  font-family: ${({ theme, bold }) => bold ? theme.valueBold : theme.valueRegular};
+
+  ${responsiveFont}
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+`;

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EntryList, EntryListItem, EntryListHeading, EntryListText, } from "./entry-list";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Modules/EntryList",
+    component: EntryList,
+    decorators: [
+        (Story) => (_jsx(Decorator, { maxWidth: "800px", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(EntryList, { children: [_jsxs(EntryListItem, { 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." })] }), _jsxs(EntryListItem, { children: [_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." })] }), _jsxs(EntryListItem, { children: [_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." })] })] })),
+};

package/dist/components/navigation/nav-cell/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/navigation/nav-cell/nav-cell.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { media } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
+import { ToggableChevron } from "../../../components/icons/toggable-chevron/toggable-chevron";
+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/navigation/nav-cell/nav-cell.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NavigationCell } from "./nav-cell";
+declare const meta: Meta<typeof NavigationCell>;
+export default meta;
+type Story = StoryObj<typeof NavigationCell>;
+export declare const Default: Story;
+export declare const Active: Story;

package/dist/components/navigation/nav-cell/nav-cell.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavigationCell } from "./nav-cell";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Navigation/NavCell",
+    component: NavigationCell,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx("div", { style: { height: '76px' }, children: _jsx(Story, {}) }) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        title: "Lorem ipsum",
+        active: false
+    }
+};
+export const Active = {
+    args: {
+        title: "Lorem ipsum",
+        active: true
+    }
+};

package/dist/components/navigation/nav-item/nav-item.d.ts

@@ -0,0 +1,18 @@
+import { WebPageUrl } from '../../../models/web-page-url';
+export type NavigationItemProps = {
+    model: NavigationItemModel;
+    expanded?: boolean;
+    parent?: string;
+    onToggle: (model: NavigationItemModel) => void;
+    onLinkClick?: () => void;
+};
+export type NavigationItemModel = {
+    key: string;
+    title: string;
+    highlight?: boolean;
+    slug?: {
+        current: string;
+    };
+    items?: WebPageUrl[];
+};
+export declare const NavigationItem: ({ model, expanded, onToggle, onLinkClick }: NavigationItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/nav-item/nav-item.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from "gatsby";
+import styled, { css } from "styled-components";
+import { media } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
+import { ToggableChevron } from "../../../components/icons/toggable-chevron/toggable-chevron";
+import { HeartIcon } from "../../../components/icons/heart-icon/heart-icon";
+export const NavigationItem = ({ model, expanded, onToggle, onLinkClick }) => {
+    const { highlight, title, items, slug } = model;
+    return (_jsxs(Wrapper, { "data-test": "nav-item", children: [slug ? (_jsxs(HeaderLink, { to: slug.current, onClick: () => {
+                    onLinkClick?.();
+                }, children: [_jsx(Title, { active: highlight, children: title }), highlight && (_jsx(IconWrapper, { children: _jsx(HeartIcon, {}) }))] })) : (_jsxs(HeaderButton, { onClick: () => {
+                    onToggle(model);
+                }, children: [_jsx(Title, { children: title }), _jsx(StyledToggle, { toggled: expanded, disableCircle: false })] })), (!slug && items) && (_jsx(Expandable, { "data-test": "nav-item-list", active: expanded, children: items.map(({ webUrlName, internalLink }) => (_jsx(StyledListItem, { children: _jsx(StyledLink, { tabIndex: !expanded ? -1 : 0, to: internalLink?.slug?.current ?? "", onClick: () => {
+                            onLinkClick?.();
+                        }, children: webUrlName }) }, webUrlName))) }))] }));
+};
+const Wrapper = styled.li `
+  display: flex;
+  flex-direction: column;
+  margin-top: ${rem(16)};
+`;
+const HeaderButton = styled.button `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  padding: 0;
+  border: 0;
+  background: none;
+`;
+const HeaderLink = styled(Link) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  text-decoration: none; 
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+const Title = styled.p `
+  font-size: ${rem(16)};
+  margin: 0;
+  margin-right: ${rem(8)};
+  text-align: left;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `};
+
+  ${({ active }) => active && css `
+    color: ${({ theme }) => theme.red};
+  `};
+
+  ${media.L `
+    font-size: ${rem(18)};
+    margin-right: ${rem(6)};
+  `}
+`;
+const IconWrapper = styled.div `
+  display: flex;
+
+  ${media.L `
+    margin-right: ${rem(20)};
+  `}
+`;
+const StyledToggle = styled(ToggableChevron) `
+  margin-left: auto;
+
+  ${media.L `
+    margin-right: ${rem(20)};
+  `}
+`;
+const Expandable = styled.ul `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  display: none;
+
+  ${({ active }) => active && css `
+    display: block;
+  `};
+`;
+const StyledListItem = styled.li `
+  margin-top: ${rem(16)};
+  margin-left: ${rem(8)};
+`;
+const StyledLink = styled(Link) `
+  font-size: ${rem(16)};
+  text-decoration: none;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueRegular};
+    
+    ${media.L `
+      font-family: ${theme.valueMedium};
+    `}
+  `};
+`;

package/dist/components/navigation/nav-item/nav-item.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NavigationItem } from "./nav-item";
+declare const meta: Meta<typeof NavigationItem>;
+export default meta;
+type Story = StoryObj<typeof NavigationItem>;
+export declare const Default: Story;
+export declare const Highlighted: Story;
+export declare const WithItems: Story;
+export declare const WithItemsExpanded: Story;

package/dist/components/navigation/nav-item/nav-item.stories.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavigationItem } from "./nav-item";
+import { Decorator } from "../../../components/decorator/decorator";
+const mockWebUrlItems = [
+    {
+        webUrlName: 'Sub Item #1',
+        slugReference: {
+            slug: '/sub-item-1/',
+        },
+    },
+    {
+        webUrlName: 'Sub Item #2',
+        slugReference: {
+            slug: '/sub-item-2/',
+        },
+    },
+];
+const navItemModelMockDefault = {
+    key: 'A0',
+    title: 'Nav Item default',
+    highlight: false,
+    slug: {
+        current: '/item-1/',
+    },
+    items: [],
+};
+const navItemModelMockHiglighted = {
+    key: 'A0',
+    title: 'Nav Item Highlighted',
+    highlight: true,
+    slug: {
+        current: '/item-1/',
+    },
+    items: [],
+};
+const navItemModelMockExpandable = {
+    key: 'A0',
+    title: 'Nav Item Expandable',
+    highlight: false,
+    items: [...mockWebUrlItems],
+};
+const meta = {
+    title: "Navigation/NavItem",
+    component: NavigationItem,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        model: navItemModelMockDefault,
+        expanded: false
+    }
+};
+export const Highlighted = {
+    args: {
+        model: navItemModelMockHiglighted,
+        expanded: false
+    }
+};
+export const WithItems = {
+    args: {
+        model: navItemModelMockExpandable,
+        expanded: false
+    }
+};
+export const WithItemsExpanded = {
+    args: {
+        model: navItemModelMockExpandable,
+        expanded: true
+    }
+};

package/dist/components/navigation/pagination/pagination.d.ts

@@ -0,0 +1,12 @@
+export type PaginationProps = {
+    numberOfPages: number;
+    currentPage: number;
+    onChange?: (page: number) => void;
+    isMobile?: boolean;
+    indexStartsAt?: number;
+    localeText: {
+        prePage: string;
+        nextPage: string;
+    };
+};
+export declare const Pagination: ({ numberOfPages, currentPage, isMobile, localeText, onChange, indexStartsAt, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/pagination/pagination.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { rem } from "../../../styles/units";
+import { ChevronLeftIcon } from "../../../components/icons/chevron-left-icon/chevron-left-icon";
+import { ChevronRightIcon } from "../../../components/icons/chevron-right-icon/chevron-right-icon";
+import { COLORS } from "../../../styles/theme";
+export const Pagination = ({ numberOfPages, currentPage, isMobile = true, localeText = {
+    prePage: "",
+    nextPage: "",
+}, onChange = () => { }, indexStartsAt = 0, }) => {
+    const pageIndex = currentPage - indexStartsAt;
+    const { prePage, nextPage } = localeText;
+    const isFirstPage = pageIndex === 0;
+    const isLastPage = pageIndex === numberOfPages - 1;
+    const goToPage = (e, pageIndex) => {
+        e.preventDefault();
+        const adjustedIndex = pageIndex + indexStartsAt;
+        onChange(adjustedIndex);
+    };
+    const getVisiblePages = (currentPage, total, isMobile) => {
+        if (total <= 7)
+            return Array.from({ length: total }, (_, i) => i);
+        if (isMobile) {
+            if (currentPage <= 1)
+                return [0, 1, 2, "...", total - 1];
+            if (currentPage >= total - 2)
+                return [0, "...", total - 3, total - 2, total - 1];
+            return [0, "...", currentPage, "...", total - 1];
+        }
+        if (currentPage <= 2)
+            return [0, 1, 2, 3, 4, "...", total - 1];
+        if (currentPage >= total - 3)
+            return [0, "...", total - 5, total - 4, total - 3, total - 2, total - 1];
+        return [
+            0,
+            "...",
+            currentPage - 1,
+            currentPage,
+            currentPage + 1,
+            "...",
+            total - 1,
+        ];
+    };
+    return (numberOfPages > 0 && (_jsxs(StyledList, { children: [_jsx(StyleListItem, { children: _jsx(PaginationArrow, { isDisabled: isFirstPage, "aria-label": prePage, onClick: (e) => goToPage(e, pageIndex - 1), children: _jsx(ChevronLeftIcon, { width: 12, height: 12, color: isFirstPage ? COLORS.grayDark : COLORS.blackLight }) }) }), getVisiblePages(pageIndex, numberOfPages, isMobile).map((page, index) => (_jsx(StyleListItem, { children: page === "..." ? (_jsx(Ellipsis, { children: "\u2026" })) : (_jsx(PaginationItem, { isSelected: pageIndex === page, onClick: (e) => goToPage(e, page), children: page + 1 })) }, index))), _jsx(StyleListItem, { children: _jsx(PaginationArrow, { isDisabled: isLastPage, "aria-label": nextPage, onClick: (e) => goToPage(e, pageIndex + 1), children: _jsx(ChevronRightIcon, { width: 12, height: 12, color: isLastPage ? COLORS.grayDark : COLORS.blackLight }) }) })] })));
+};
+const StyledList = styled.ul `
+  margin: 0 auto;
+  margin-top: ${rem(32)};
+  display: flex;
+  padding: 0;
+  flex-wrap: wrap;
+  list-style: none;
+  align-items: center;
+  justify-content: center;
+`;
+const StyleListItem = styled.li `
+  padding: ${rem(4)};
+`;
+const PaginationItem = styled.button `
+  cursor: pointer;
+  width: ${rem(40)};
+  height: ${rem(40)};
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: ${rem(5)};
+  background-color: transparent;
+  text-decoration: none;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+    font-weight: 400;
+    line-height: ${rem(22)};
+    border: ${rem(1)} solid ${theme.blackLight};
+  `};
+
+  ${({ theme, isSelected }) => isSelected &&
+    css `
+      background-color: ${theme.blackLight};
+      border-color: transparent;
+      color: ${theme.white};
+    `};
+`;
+const PaginationArrow = styled.button `
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${rem(40)};
+  height: ${rem(40)};
+  border: ${({ theme }) => `${rem(1)} solid ${theme.blackLight}`};
+  border-radius: ${rem(5)};
+  background-color: ${({ theme }) => theme.white};
+
+  ${({ isDisabled }) => isDisabled &&
+    css `
+      pointer-events: none;
+      cursor: default;
+      border: ${({ theme }) => `${rem(1)} solid ${theme.grayDark}`};
+    `}
+`;
+const Ellipsis = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${rem(40)};
+  height: ${rem(40)};
+  border: ${({ theme }) => `${rem(1)} solid ${theme.blackLight}`};
+  border-radius: ${rem(5)};
+  color: ${({ theme }) => theme.blackLight};
+`;