@hlf-fe/pulmo-ui 1.0.1 → 1.1.0

package/README.md

@@ -1,54 +1,21 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
-```
+## Link the library to a local project
+
+1. In the root directory of the component library, run:
+
+```bash
+npm link
+```
+
+2. In your project's root (the consumer of the library), run:
+
+```bash
+npm link @hlf-fe/pulmo-ui
+```
+
+3. Verify the link in your consumer project's root:
+
+```bash
+npm ls @hlf-fe/pulmo-ui
+
+output: @hlf-fe/pulmo-ui@x.x.x -> /local/path/to/lib
+```

package/dist/components/buttons/button/button.js

@@ -33,7 +33,7 @@ const StyledButton = styled.button `
   text-decoration: none;
   color: ${({ theme, inverted }) => (inverted ? theme.red : theme.white)};
   width: ${({ fullWidthMobile }) => (fullWidthMobile ? "100%" : "fit-content")};
-  background-color: ${({ theme, inverted }) => inverted ? theme.white : theme.black};
+  background-color: ${({ theme, inverted }) => inverted ? theme.white : theme.red};
   line-height: 2.5;
   border-radius: ${rem(5)};
   border-color: ${({ theme, inverted }) => inverted ? theme.red : "transparent"};

package/dist/components/buttons/button/button.stories.js

@@ -1,7 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "./button";
+import { Decorator } from "../../../components/decorator/decorator";
 const meta = {
-    title: "Components/Button",
+    title: "Buttons/Button",
     component: Button,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
 };
 export default meta;
 export const Default = {

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

@@ -0,0 +1,14 @@
+import { HTMLProps, ReactNode } from "react";
+export type LoadingButtonProps = HTMLProps<HTMLButtonElement> & {
+    type?: "button" | "reset" | "submit";
+    loading: boolean;
+    disabled?: boolean;
+    btnSize?: "s" | "m" | "l";
+    fullWidth?: boolean;
+    fullWidthMobile?: boolean;
+    dataTest?: string;
+    inverted?: boolean;
+    children: ReactNode;
+    onClick: () => void;
+};
+export declare const LoadingButton: ({ type, children, onClick, loading, disabled, className, btnSize, fullWidth, fullWidthMobile, dataTest, inverted, }: LoadingButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/loading-button/loading-button.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../../components/buttons/button/button";
+import { LoadingSpinner } from "../../../components/icons/loading-spinner/loading-spinner";
+import styled from "styled-components";
+import { rem } from "../../../styles/units";
+import { COLORS } from "../../../styles/theme";
+export const LoadingButton = ({ type = "submit", children, onClick = () => { }, loading = false, disabled = false, className, btnSize, fullWidth, fullWidthMobile, dataTest, inverted = false, }) => {
+    return (_jsxs(Container, { className: className, children: [_jsx(Button, { dataTest: dataTest, type: type, children: children, onClick: onClick, disabled: disabled, btnSize: btnSize, fullWidthMobile: fullWidthMobile, fullWidth: fullWidth, inverted: inverted }), loading && (_jsx(LoadingSpinnerContainer, { children: _jsx(LoadingSpinner, { color: COLORS?.white }) }))] }));
+};
+const Container = styled.div `
+  position: relative;
+  width: fit-content;
+`;
+const LoadingSpinnerContainer = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: ${({ theme }) => theme.red};
+  z-index: 1;
+  border-radius: ${rem(5)};
+`;

package/dist/components/buttons/loading-button/loading-button.stories.d.ts

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

package/dist/components/buttons/loading-button/loading-button.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoadingButton } from "./loading-button";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Buttons/LoadingButton",
+    component: LoadingButton,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        btnSize: "m",
+        children: "Button Text",
+    },
+};
+export const Loading = {
+    args: {
+        children: "Button Text",
+        loading: true,
+    },
+};

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

@@ -0,0 +1,20 @@
+export type TextButtonProps = {
+    type?: "button" | "reset" | "submit";
+    text?: string;
+    className?: string;
+    disabled?: boolean;
+    icon?: string;
+    dataTest?: string;
+    to?: string;
+    href?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    tabIndex?: number;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    children?: React.ReactNode;
+};
+export type StyledTextButtonProps = {
+    icon?: string;
+};
+export declare const TextButton: ({ type, onClick, onMouseEnter, onMouseLeave, className, disabled, dataTest, children, to, href, target, tabIndex, }: TextButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/text-button/text-button.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { rem } from "../../../styles/units";
+import { Link } from "gatsby";
+export const TextButton = ({ type = "button", onClick, onMouseEnter, onMouseLeave, className, disabled, dataTest, children, to, href, target, tabIndex, }) => {
+    const commonProps = {
+        className,
+        onClick,
+        onMouseEnter,
+        onMouseLeave,
+        "data-test": dataTest,
+        tabIndex,
+    };
+    const asElement = to ? Link : href ? "a" : "button";
+    return (_jsx(StyledTextButton, { as: asElement, ...commonProps, ...(to ? { to } : {}), ...(href
+            ? {
+                href,
+                target,
+                rel: target === "_blank" ? "noopener noreferrer" : undefined,
+            }
+            : {}), ...(!to && !href ? { type, disabled } : {}), children: children }));
+};
+const StyledTextButton = styled.button `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 400;
+  font-size: ${rem(16)};
+  width: fit-content;
+  background-color: transparent;
+  text-decoration: underline;
+  line-height: 1.75;
+  border: none;
+  padding: 0;
+
+  ${({ theme }) => css `
+    color: ${theme.red};
+    font-family: ${theme.valueBold};
+
+    &:hover,
+    :active,
+    :focus-visible {
+      &:not(:disabled) {
+        text-decoration: none;
+        color: ${theme.redHover};
+        svg {
+          path {
+            fill: ${theme.redHover};
+          }
+        }
+      }
+    }
+  `};
+
+  &:disabled {
+    color: ${({ theme }) => theme?.blackLight};
+    &:hover {
+      text-decoration: none;
+    }
+  }
+`;

package/dist/components/buttons/text-button/text-button.stories.d.ts

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

package/dist/components/buttons/text-button/text-button.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextButton } from "./text-button";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Buttons/TextButton",
+    component: TextButton,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        children: "Button Text",
+    },
+};

package/dist/components/decorator/decorator.d.ts

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

package/dist/components/decorator/decorator.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+export const Decorator = ({ children, maxWidth = "100%" }) => {
+    return _jsx(Container, { maxWidth: maxWidth, children: children });
+};
+const Container = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  max-width: ${({ maxWidth }) => maxWidth};
+  margin: 0 auto;
+`;

package/dist/components/feedback/alert/alert.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { INFO, ERROR, WARNING, SUCCESS } from "../../../constants/general";
+export type AlertProps = {
+    children: ReactNode;
+    className?: string;
+    onClick?: () => void;
+    open?: boolean;
+    color?: string;
+    dismissable?: boolean;
+    severity?: typeof INFO | typeof WARNING | typeof ERROR | typeof SUCCESS;
+};
+export type StyledAlertprops = {
+    color?: string;
+    severity?: string;
+};
+export declare const Alert: ({ children, className, severity, onClick, open, color, dismissable, }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AlertText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;

package/dist/components/feedback/alert/alert.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { CloseIconCircle } from "../../../components/icons/close-icon/close-icon";
+import { ExclamationMarkIcon } from "../../../components/icons/exclamation-mark-icon/exclamation-mark-icon";
+import { WarningIcon } from "../../../components/icons/warning-icon/warning-icon";
+import { INFO, ERROR, WARNING, SUCCESS } from "../../../constants/general";
+import { alertTheme } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
+import styled from "styled-components";
+export const Alert = ({ children, className, severity, onClick, open, color, dismissable, }) => {
+    const [show, setShow] = useState(true);
+    useEffect(() => {
+        if (open)
+            setShow(true);
+    }, [open]);
+    const handleClick = () => {
+        if (onClick)
+            onClick();
+        setShow(false);
+    };
+    if (show) {
+        return (_jsxs(Container, { "data-test": `alert-container${severity ? `-${severity}` : ""}`, className: className, color: color, severity: severity, children: [severity === INFO && _jsx(ExclamationMarkIcon, {}), severity === ERROR && _jsx(WarningIcon, {}), _jsx(ContentWrapper, { children: children }), dismissable && (_jsx(CloseButton, { "data-test": "alert-close-cta", onClick: handleClick, children: _jsx(StyledCloseIcon, {}) }))] }));
+    }
+    return null;
+};
+const Container = styled.div `
+  display: flex;
+  justify-content: space-between;
+  gap: ${rem(4)};
+
+  ${({ severity }) => {
+    switch (severity) {
+        case ERROR:
+            return alertTheme.error;
+        case WARNING:
+            return alertTheme.warning;
+        case INFO:
+            return alertTheme.info;
+        case SUCCESS:
+            return alertTheme.success;
+        default:
+            return alertTheme.default;
+    }
+}}
+
+  background-color: ${({ color }) => color ?? ""};
+  border-radius: ${rem(4)};
+  padding: ${rem(10)} ${rem(15)};
+`;
+const ContentWrapper = styled.div `
+  flex: 1;
+  align-self: center;
+`;
+const CloseButton = styled.button `
+  align-self: flex-start;
+  border: none;
+  background-color: transparent;
+  padding: 0 0 0 ${rem(20)};
+`;
+const StyledCloseIcon = styled(CloseIconCircle) `
+  vertical-align: middle;
+`;
+export const AlertText = styled.p `
+  font-size: ${rem(14)};
+  line-height: normal;
+  margin: 0;
+  padding: 0;
+`;

package/dist/components/feedback/alert/alert.stories.d.ts

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

package/dist/components/feedback/alert/alert.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from "./alert";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Feedback/Alert",
+    component: Alert,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        children: _jsx("p", { children: " Alert Content here " }),
+        dismissable: true,
+    },
+    argTypes: {
+        severity: {
+            control: "select",
+            options: ["error", "warning", "info", "success"],
+        },
+    },
+};

package/dist/components/icons/chevron-left-icon/chevron-left-icon.d.ts

@@ -0,0 +1,7 @@
+export type Props = {
+    className?: string;
+    color?: string;
+    width: number;
+    height: number;
+};
+export declare const ChevronLeftIcon: ({ className, color, width, height, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/chevron-left-icon/chevron-left-icon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { COLORS } from "../../../styles/theme";
+export const ChevronLeftIcon = ({ className, color = COLORS.blackLight, width = 16, height = 16, }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 16 16", className: className, children: _jsx("path", { fill: color, fillRule: "nonzero", d: "M6.707 8l5.293-5.293a1 1 0 1 0-1.414-1.414l-6 6a1 1 0 0 0 0 1.414l6 6a1 1 0 0 0 1.414-1.414L6.707 8z" }) }));

package/dist/components/icons/chevron-left-icon/chevron-left-icon.stories.d.ts

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

package/dist/components/icons/chevron-left-icon/chevron-left-icon.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronLeftIcon } from "./chevron-left-icon";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Icons/ChevronLeftIcon",
+    component: ChevronLeftIcon,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {},
+};

package/dist/components/icons/chevron-right-icon/chevron-right-icon.d.ts

@@ -0,0 +1,7 @@
+export type ChevronRightIconProps = {
+    className?: string;
+    color?: string;
+    width?: number;
+    height?: number;
+};
+export declare const ChevronRightIcon: ({ className, color, width, height, }: ChevronRightIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/chevron-right-icon/chevron-right-icon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { COLORS } from "../../../styles/theme";
+export const ChevronRightIcon = ({ className, color = COLORS.blackLight, width = 16, height = 16, }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 16 16", className: className, children: _jsx("path", { fill: color, fillRule: "nonzero", d: "M9.293 8L4 13.293a1 1 0 1 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6A1 1 0 1 0 4 2.707L9.293 8z" }) }));

package/dist/components/icons/chevron-right-icon/chevron-right-icon.stories.d.ts

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

package/dist/components/icons/chevron-right-icon/chevron-right-icon.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronRightIcon } from "./chevron-right-icon";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Icons/ChevronRightIcon",
+    component: ChevronRightIcon,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {},
+};

package/dist/components/icons/close-icon/close-icon.d.ts

@@ -0,0 +1,12 @@
+export type CloseIconProps = {
+    className?: string;
+};
+export declare const CloseIcon: ({ className, color }: {
+    className?: string;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CloseIconCircle: ({ className }: CloseIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CloseIconCircleAlt: ({ className, color, }: {
+    className?: string;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/close-icon/close-icon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { COLORS } from "../../../styles/theme";
+export const CloseIcon = ({ className = "", color = COLORS.blackLight }) => (_jsx("svg", { className: className, height: "10", viewBox: "0 0 10 10", "aria-label": "close/reset", width: "10", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m348.612899 99.2097046.094208.0831886 3.292893 3.2921068 3.292893-3.2921068c.390525-.3905243 1.023689-.3905243 1.414214 0 .360484.360484.388213.9277148.083188 1.3200058l-.083188.094208-3.292107 3.292893 3.292107 3.292893c.390524.390525.390524 1.023689 0 1.414214-.360484.360484-.927715.388213-1.320006.083188l-.094208-.083188-3.292893-3.292107-3.292893 3.292107c-.390525.390524-1.023689.390524-1.414214 0-.360484-.360484-.388213-.927715-.083188-1.320006l.083188-.094208 3.292107-3.292893-3.292107-3.292893c-.390524-.390525-.390524-1.0236895 0-1.4142138.360484-.3604839.927715-.3882135 1.320006-.0831886z", fill: color, transform: "translate(-347 -99)" }) }));
+export const CloseIconCircle = ({ className }) => (_jsx("svg", { height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", "aria-label": "Close/reset", className: className, children: _jsxs("g", { fill: "none", fillRule: "evenodd", children: [_jsx("rect", { height: "23", opacity: ".296", rx: "11.5", stroke: "#333", width: "23", x: ".5", y: ".5" }), _jsx("path", { d: "m8.61289944 7.20970461.09420734.08318861 3.29289322 3.29210678 3.2928932-3.29210678c.3905243-.39052429 1.0236893-.39052429 1.4142136 0 .3604839.36048396.3882135.92771502.0831886 1.32000622l-.0831886.09420734-3.2921068 3.29289322 3.2921068 3.2928932c.3905243.3905243.3905243 1.0236893 0 1.4142136-.360484.3604839-.927715.3882135-1.3200062.0831886l-.0942074-.0831886-3.2928932-3.2921068-3.29289322 3.2921068c-.39052429.3905243-1.02368927.3905243-1.41421356 0-.36048396-.360484-.3882135-.927715-.08318861-1.3200062l.08318861-.0942074 3.29210678-3.2928932-3.29210678-3.29289322c-.39052429-.39052429-.39052429-1.02368927 0-1.41421356.36048396-.36048396.92771502-.3882135 1.32000622-.08318861z", fill: "#333", fillRule: "nonzero" })] }) }));
+export const CloseIconCircleAlt = ({ className = "", color = COLORS.blackLight, }) => {
+    return (_jsx(SVG, { className: className, width: 24, height: 24, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12 0c3.205 0 6.219 1.248 8.485 3.515A11.921 11.921 0 0 1 24 12c0 3.205-1.248 6.219-3.515 8.485A11.921 11.921 0 0 1 12 24a11.921 11.921 0 0 1-8.485-3.515A11.921 11.921 0 0 1 0 12c0-3.205 1.248-6.219 3.515-8.485A11.922 11.922 0 0 1 12 0Zm0 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2ZM8.707 7.293 12 10.585l3.293-3.292a1 1 0 0 1 1.414 1.414L13.415 12l3.292 3.293a1 1 0 0 1-1.414 1.414L12 13.415l-3.293 3.292a1 1 0 0 1-1.414-1.414L10.585 12 7.293 8.707a1 1 0 1 1 1.414-1.414Z", fill: color, fillRule: "nonzero" }) }));
+};
+const SVG = styled.svg ``;

package/dist/components/icons/close-icon/close-icon.stories.d.ts

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

package/dist/components/icons/close-icon/close-icon.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CloseIcon } from "./close-icon";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Icons/CloseIcon",
+    component: CloseIcon,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        color: "#333",
+    },
+};

package/dist/components/icons/exclamation-mark-icon/exclamation-mark-icon.d.ts

@@ -0,0 +1,3 @@
+export declare const ExclamationMarkIcon: ({ color }: {
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/exclamation-mark-icon/exclamation-mark-icon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { COLORS } from "../../../styles/theme";
+export const ExclamationMarkIcon = ({ color = COLORS.blueNavy }) => (_jsx("svg", { width: "32px", height: "32px", viewBox: "0 0 32 32", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: _jsx("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: _jsx("g", { transform: "translate(-912.000000, -824.000000)", children: _jsx("g", { transform: "translate(904.000000, 819.000000)", children: _jsxs("g", { transform: "translate(8.000000, 5.000000)", children: [_jsx("rect", { fill: "#838383", opacity: "0", x: "0", y: "0", width: "32", height: "32" }), _jsx("path", { d: "M16,4 C19.2053125,4 22.2187656,5.24823438 24.4852656,7.51473437 C26.7517656,9.7811875 28,12.7946875 28,16 C28,19.2053125 26.7517656,22.2187656 24.4852656,24.4852656 C22.2187656,26.7517656 19.2053125,28 16,28 C12.7946875,28 9.7811875,26.7517656 7.51473437,24.4852656 C5.24823438,22.2187656 4,19.2053125 4,16 C4,12.7946875 5.24823437,9.7811875 7.51473437,7.51473437 C9.78123438,5.24828125 12.7946875,4 16,4 Z M16,6 C10.4860135,6 6,10.4860135 6,16 C6,21.5139865 10.4860135,26 16,26 C21.5139865,26 26,21.5139865 26,16 C26,10.4860135 21.5139865,6 16,6 Z M16.000243,20 C16.5527003,20 17,20.4477177 17,20.9999089 C17,21.5521001 16.5527003,22 16.000243,22 C15.4482717,22 15,21.5521001 15,20.9999089 C15,20.4477177 15.4482717,20 16.000243,20 Z M16,9 C16.5522847,9 17,9.44771525 17,10 L17,18 C17,18.5522847 16.5522847,19 16,19 C15.4477153,19 15,18.5522847 15,18 L15,10 C15,9.44771525 15.4477153,9 16,9 Z", fill: color, fillRule: "nonzero" })] }) }) }) }) }));

package/dist/components/icons/exclamation-mark-icon/exclamation-mark-icon.stories.d.ts

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

package/dist/components/icons/exclamation-mark-icon/exclamation-mark-icon.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ExclamationMarkIcon } from "./exclamation-mark-icon";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Icons/ExclamationMarkIcon",
+    component: ExclamationMarkIcon,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        color: "#333",
+    },
+};

package/dist/components/icons/loading-spinner/loading-spinner.d.ts

@@ -0,0 +1,20 @@
+export type LoadingSpinnerSizes = "s" | "m" | "l";
+export type LoadingSpinnerProps = {
+    color?: string;
+    size?: LoadingSpinnerSizes;
+    className?: string;
+};
+export type StyledLoadingSpinnerProps = {
+    size: LoadingSpinnerSizes;
+    width: {
+        s: string;
+        m: string;
+        l: string;
+    };
+    padding: {
+        s: string;
+        m: string;
+        l: string;
+    };
+};
+export declare const LoadingSpinner: ({ color, className, size, }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;