@hlf-fe/pulmo-ui 1.0.1 → 1.1.0

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/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};
+`;

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

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

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Pagination } from "./pagination";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Navigation/Pagination",
+    component: Pagination,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const [page, setPage] = useState(0);
+        return (_jsx(Pagination, { currentPage: page, numberOfPages: 27, indexStartsAt: 0, onChange: (newPage) => setPage(newPage), localeText: {
+                prePage: "Previous page",
+                nextPage: "Next page",
+            } }));
+    },
+};

package/dist/constants/general.d.ts

@@ -0,0 +1,4 @@
+export declare const INFO = "info";
+export declare const WARNING = "warning";
+export declare const ERROR = "error";
+export declare const SUCCESS = "success";

package/dist/constants/general.js

@@ -0,0 +1,5 @@
+// Severities
+export const INFO = "info";
+export const WARNING = "warning";
+export const ERROR = "error";
+export const SUCCESS = "success";

package/dist/hoc/withDefaultTheme.d.ts

@@ -1 +1 @@
-export declare function withDefaultTheme<T extends object>(Component: React.ComponentType<T>): React.FC<T>;
+export declare const withDefaultTheme: <T extends object>(Component: React.ComponentType<T>) => React.FC<T>;

package/dist/hoc/withDefaultTheme.js

@@ -2,11 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { THEME_SETTINGS } from "../styles/theme";
 import { ThemeContext, ThemeProvider } from "styled-components";
-export function withDefaultTheme(Component) {
-    return function Wrapped(props) {
-        const theme = useContext(ThemeContext);
-        if (theme)
-            return _jsx(Component, { ...props });
-        return (_jsx(ThemeProvider, { theme: THEME_SETTINGS, children: _jsx(Component, { ...props }) }));
-    };
-}
+export const withDefaultTheme = (Component) => (props) => {
+    const theme = useContext(ThemeContext);
+    return theme ? (_jsx(Component, { ...props })) : (_jsx(ThemeProvider, { theme: THEME_SETTINGS, children: _jsx(Component, { ...props }) }));
+};

package/dist/index.d.ts

@@ -1,3 +1,41 @@
-import { ButtonProps } from "./components/buttons/button/button";
-export type { ButtonProps } from "./components/buttons/button/button";
+import { type ButtonProps } from "./components/buttons/button/button";
+import { type TextButtonProps } from "./components/buttons/text-button/text-button";
+import { type LoadingButtonProps } from "./components/buttons/loading-button/loading-button";
+import { type AlertProps } from "./components/feedback/alert/alert";
+import { type LoadingSpinnerProps } from "./components/icons/loading-spinner/loading-spinner";
+import { type FormErrorProps } from "./components/inputs/form-error/form-error";
+import { type FormLabelProps } from "./components/inputs/form-label/form-label";
+import { type TextFieldProps } from "./components/inputs/text-field/text-field";
+import { type EmailSignupFormProps } from "./components/modules/email-signup-form/email-signup-form";
+import { type ImageProps } from "./components/layout/image/image";
+import { type ContainerProps } from "./components/layout/container/container";
+import { type EntryListProps, type EntryListItemProps, type EntryListHeadingProps, type EntryListTextProps } from "./components/modules/entry-list/entry-list";
+import { type DropdownProps } from "./components/inputs/dropdown/dropdown";
+import { type PaginationProps } from "./components/navigation/pagination/pagination";
+import { type AccordionItemProps } from "./components/layout/accordion/accordion";
+export type { ButtonProps, LoadingButtonProps, TextButtonProps, EmailSignupFormProps, ImageProps, ContainerProps, AlertProps, EntryListHeadingProps, EntryListTextProps, PaginationProps, };
+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";
+export { SearchIcon } from "./components/icons/search-icon/search-icon";
+export declare const LoadingSpinner: import("react").FC<LoadingSpinnerProps>;
 export declare const Button: import("react").FC<ButtonProps>;
+export declare const LoadingButton: import("react").FC<LoadingButtonProps>;
+export declare const TextButton: import("react").FC<TextButtonProps>;
+export declare const Alert: import("react").FC<AlertProps>;
+export declare const FormError: import("react").FC<FormErrorProps>;
+export declare const FormLabel: import("react").FC<FormLabelProps>;
+export declare const TextField: import("react").FC<TextFieldProps>;
+export declare const EmailSignupForm: import("react").FC<EmailSignupFormProps>;
+export declare const Image: import("react").FC<ImageProps>;
+export declare const Container: import("react").FC<ContainerProps>;
+export declare const EntryList: import("react").FC<EntryListProps>;
+export declare const EntryListItem: import("react").FC<EntryListItemProps>;
+export declare const EntryListText: import("react").FC<EntryListTextProps>;
+export declare const EntryListHeading: import("react").FC<EntryListHeadingProps>;
+export declare const Dropdown: import("react").FC<DropdownProps>;
+export declare const Pagination: import("react").FC<PaginationProps>;
+export declare const Accordion: import("react").FC<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    disabled?: boolean;
+}>>;
+export declare const AccordionItem: import("react").FC<AccordionItemProps>;

package/dist/index.js

@@ -1,3 +1,43 @@
 import { withDefaultTheme } from "./hoc/withDefaultTheme";
-import { Button as RawButton, } from "./components/buttons/button/button";
-export const Button = withDefaultTheme(RawButton);
+// Buttons
+import { Button as ButtonComponent, } from "./components/buttons/button/button";
+import { TextButton as TextButtonComponent, } from "./components/buttons/text-button/text-button";
+import { LoadingButton as LoadingButtonComponent, } from "./components/buttons/loading-button/loading-button";
+// Components
+import { Alert as AlertComponent, } from "./components/feedback/alert/alert";
+import { LoadingSpinner as LoadingSpinnerComponent, } from "./components/icons/loading-spinner/loading-spinner";
+import { FormError as FormErrorComponent, } from "./components/inputs/form-error/form-error";
+import { FormLabel as FormLabelComponent, } from "./components/inputs/form-label/form-label";
+import { TextField as TextFieldComponent, } from "./components/inputs/text-field/text-field";
+import { EmailSignupForm as EmailSignupFormComponent, } from "./components/modules/email-signup-form/email-signup-form";
+import { Image as ImageComponent, } from "./components/layout/image/image";
+import { Container as ContainerComponent, } from "./components/layout/container/container";
+import { EntryList as EntryListComponent, EntryListItem as EntryListItemComponent, EntryListText as EntryListTextComponent, EntryListHeading as EntryListHeadingComoponent, } from "./components/modules/entry-list/entry-list";
+import { Dropdown as DropdownComponent, } from "./components/inputs/dropdown/dropdown";
+import { Pagination as PaginationComponent, } from "./components/navigation/pagination/pagination";
+import { Accordion as AccordionComponent, AccordionItem as AccordionItemComponent, } from "./components/layout/accordion/accordion";
+// Icons
+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";
+export { SearchIcon } from "./components/icons/search-icon/search-icon";
+export const LoadingSpinner = withDefaultTheme(LoadingSpinnerComponent);
+// Components
+export const Button = withDefaultTheme(ButtonComponent);
+export const LoadingButton = withDefaultTheme(LoadingButtonComponent);
+export const TextButton = withDefaultTheme(TextButtonComponent);
+export const Alert = withDefaultTheme(AlertComponent);
+export const FormError = withDefaultTheme(FormErrorComponent);
+export const FormLabel = withDefaultTheme(FormLabelComponent);
+export const TextField = withDefaultTheme(TextFieldComponent);
+export const EmailSignupForm = withDefaultTheme(EmailSignupFormComponent);
+export const Image = withDefaultTheme(ImageComponent);
+export const Container = withDefaultTheme(ContainerComponent);
+export const EntryList = withDefaultTheme(EntryListComponent);
+export const EntryListItem = withDefaultTheme(EntryListItemComponent);
+export const EntryListText = withDefaultTheme(EntryListTextComponent);
+export const EntryListHeading = withDefaultTheme(EntryListHeadingComoponent);
+export const Dropdown = withDefaultTheme(DropdownComponent);
+export const Pagination = withDefaultTheme(PaginationComponent);
+export const Accordion = withDefaultTheme(AccordionComponent);
+export const AccordionItem = withDefaultTheme(AccordionItemComponent);

package/dist/styles/mixins.js

@@ -94,8 +94,8 @@ export const siteWidthRow = () => css `
   ${media.M `
     margin-bottom: ${SPACING.spacingXL};
     margin-top: ${SPACING.spacingXL};
-    margin-left: ${rem(24)};
-    margin-right: ${rem(24)};
+    margin-left: ${rem(SPACING.blockSpacingM)};
+    margin-right: ${rem(SPACING.blockSpacingM)};
   `}
 
   ${media.L `
@@ -103,6 +103,8 @@ export const siteWidthRow = () => css `
     margin-right: auto;
     margin-bottom: ${SPACING.spacingXXL};
     margin-left: auto;
+    padding-left: ${rem(SPACING.blockSpacingM)};
+    padding-right: ${rem(SPACING.blockSpacingM)};
   `}
 `;
 export const siteWidthRowXL = () => css `
@@ -120,8 +122,8 @@ export const siteWidthRowXL = () => css `
   ${media.M `
     margin-bottom: ${SPACING.spacingXL};
     margin-top: ${SPACING.spacingXL};
-    margin-left: ${rem(24)};
-    margin-right: ${rem(24)};
+    margin-left: ${rem(SPACING.blockSpacingM)};
+    margin-right: ${rem(SPACING.blockSpacingM)};
   `}
 
   ${media.XL `
@@ -129,6 +131,8 @@ export const siteWidthRowXL = () => css `
     margin-right: auto;
     margin-bottom: ${SPACING.spacingXXL};
     margin-left: auto;
+    padding-left: ${rem(SPACING.blockSpacingM)};
+    padding-right: ${rem(SPACING.blockSpacingM)};
   `}
 `;
 export const fullWidthRow = () => css `

package/dist/styles/theme.d.ts

@@ -7,6 +7,16 @@ export declare const BREAKPOINT_VALUES: {
     XL: number;
     XXL: number;
 };
+export declare const SPACING: {
+    spacingXXS: string;
+    spacingXS: string;
+    spacingS: string;
+    spacingM: string;
+    spacingL: string;
+    spacingXL: string;
+    spacingXXL: string;
+    blockSpacingM: number;
+};
 export declare const VARIABLES: {
     siteWidthS: string;
     siteWidth: string;
@@ -20,15 +30,6 @@ export declare const THEME_SPACING: {
     lg: string;
     xl: string;
 };
-export declare const SPACING: {
-    spacingXXS: string;
-    spacingXS: string;
-    spacingS: string;
-    spacingM: string;
-    spacingL: string;
-    spacingXL: string;
-    spacingXXL: string;
-};
 export declare const FONTS: {
     valueRegular: string;
     valueMedium: string;
@@ -81,6 +82,7 @@ export declare const THEME_SETTINGS: {
     spacingL: string;
     spacingXL: string;
     spacingXXL: string;
+    blockSpacingM: number;
     skyBlue: string;
     black: string;
     blackLight: string;

package/dist/styles/theme.js

@@ -8,10 +8,20 @@ export const BREAKPOINT_VALUES = {
     XL: 1200,
     XXL: 1440,
 };
+export const SPACING = {
+    spacingXXS: rem(6),
+    spacingXS: rem(8),
+    spacingS: rem(12),
+    spacingM: rem(16),
+    spacingL: rem(32),
+    spacingXL: rem(40),
+    spacingXXL: rem(48),
+    blockSpacingM: 24,
+};
 export const VARIABLES = {
     siteWidthS: rem(BREAKPOINT_VALUES.S_ALT),
-    siteWidth: rem(BREAKPOINT_VALUES.L),
-    siteWidthXL: rem(BREAKPOINT_VALUES.XL),
+    siteWidth: rem(BREAKPOINT_VALUES.L + SPACING.blockSpacingM * 2),
+    siteWidthXL: rem(BREAKPOINT_VALUES.XL + SPACING.blockSpacingM * 2),
     siteMaxWidth: rem(1920),
     mobileNavHeight: 56,
 };
@@ -21,15 +31,6 @@ export const THEME_SPACING = {
     lg: rem(32),
     xl: rem(40),
 };
-export const SPACING = {
-    spacingXXS: rem(6),
-    spacingXS: rem(8),
-    spacingS: rem(12),
-    spacingM: rem(16),
-    spacingL: rem(32),
-    spacingXL: rem(40),
-    spacingXXL: rem(48),
-};
 export const FONTS = {
     valueRegular: '"ValueRegular", Arial, sans-serif',
     valueMedium: '"ValueMedium", Arial, sans-serif',

package/package.json

@@ -1,67 +1,78 @@
-{
-  "name": "@hlf-fe/pulmo-ui",
-  "private": false,
-  "version": "1.0.1",
-  "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "dev": "npm-run-all --parallel storybook watch",
-    "build": "tsc -b tsconfig.app.json",
-    "watch": "tsc -b tsconfig.app.json --watch",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "gatsby": "^5.14.3",
-    "npm-run-all": "^4.1.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^6.1.0"
-  },
-  "peerDependencies": {
-    "gatsby": "^5.14.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^6.1.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
-    "@eslint/js": "^9.25.0",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/experimental-addon-test": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@types/node": "^22.15.17",
-    "@types/react": "^18.3.21",
-    "@types/react-dom": "^18.3.7",
-    "@vitejs/plugin-react": "^4.4.1",
-    "@vitest/browser": "^3.1.3",
-    "@vitest/coverage-v8": "^3.1.3",
-    "eslint": "^9.25.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "eslint-plugin-storybook": "^0.12.0",
-    "globals": "^16.0.0",
-    "playwright": "^1.52.0",
-    "storybook": "^8.6.12",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.5",
-    "vitest": "^3.1.3"
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
-  }
-}
+{
+  "name": "@hlf-fe/pulmo-ui",
+  "private": false,
+  "version": "1.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "npm-run-all --parallel storybook watch",
+    "build": "tsc -p tsconfig.app.json && tsc-alias -p tsconfig.app.json",
+    "watch": "nodemon --watch src --ext ts,tsx --exec \"tsc -p tsconfig.app.json && tsc-alias -p tsconfig.app.json\"",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "release:npm": "npm run build && npm publish --access public"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.0.1",
+    "gatsby": "^5.14.3",
+    "gatsby-plugin-image": "^3.14.0",
+    "i": "^0.3.7",
+    "nodemon": "^3.1.10",
+    "npm": "^11.3.0",
+    "npm-run-all": "^4.1.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.56.3",
+    "styled-components": "^6.1.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "yup": "^1.6.1"
+  },
+  "peerDependencies": {
+    "gatsby": "^5.14.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.6",
+    "@eslint/js": "^9.25.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/experimental-addon-test": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@types/node": "^22.15.17",
+    "@types/react": "^18.3.21",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/browser": "^3.1.3",
+    "@vitest/coverage-v8": "^3.1.3",
+    "concurrently": "^9.1.2",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^0.12.0",
+    "globals": "^16.0.0",
+    "playwright": "^1.52.0",
+    "storybook": "^8.6.12",
+    "tsc-alias": "^1.8.16",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.5",
+    "vitest": "^3.1.3"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/dist/App.d.ts

@@ -1,3 +0,0 @@
-import './App.css';
-declare function App(): import("react/jsx-runtime").JSX.Element;
-export default App;