@hlf-fe/pulmo-ui 1.0.1 → 1.2.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/external-icon/external-icon.d.ts

@@ -0,0 +1,5 @@
+type ExternalIconType = {
+    className?: string;
+};
+export declare const ExternalIcon: ({ className }: ExternalIconType) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ExternalIcon = ({ className = "" }) => (_jsx("svg", { className: className, width: "16px", height: "16px", viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { stroke: "none", "stroke-width": "1", fill: "none", fillRule: "evenodd", children: _jsx("g", { transform: "translate(-428.000000, -10860.000000)", fill: "currentColor", fillRule: "nonzero", children: _jsx("path", { d: "M433,10861 C433.552285,10861 434,10861.4477 434,10862 C434,10862.5523 433.552285,10863 433,10863 L431,10863 C430.447715,10863 430,10863.4477 430,10864 L430,10873 C430,10873.5523 430.447715,10874 431,10874 L440,10874 C440.552285,10874 441,10873.5523 441,10873 L441,10871 C441,10870.4477 441.447715,10870 442,10870 C442.552285,10870 443,10870.4477 443,10871 L443,10873 C443,10874.6569 441.656854,10876 440,10876 L431,10876 C429.343146,10876 428,10874.6569 428,10873 L428,10864 C428,10862.3431 429.343146,10861 431,10861 L433,10861 Z M443,10860 L443.019354,10860.0002 C443.042681,10860.0006 443.065995,10860.0019 443.08925,10860.004 L443,10860 C443.05062,10860 443.100362,10860.0038 443.148961,10860.011 C443.165949,10860.0136 443.183375,10860.0167 443.200726,10860.0202 C443.222746,10860.0246 443.244436,10860.0298 443.26584,10860.0357 C443.281463,10860.0401 443.296851,10860.0447 443.312143,10860.0497 C443.331798,10860.0561 443.351579,10860.0633 443.371059,10860.0711 C443.388796,10860.0782 443.406098,10860.0857 443.423222,10860.0937 C443.443891,10860.1034 443.464294,10860.1138 443.484277,10860.1249 C443.496394,10860.1315 443.508613,10860.1386 443.520709,10860.146 C443.546275,10860.1617 443.571131,10860.1785 443.595159,10860.1963 C443.602603,10860.2018 443.609842,10860.2073 443.617022,10860.2129 C443.680182,10860.2626 443.737448,10860.3198 443.787214,10860.3832 L443.707107,10860.2929 C443.742501,10860.3283 443.774687,10860.3657 443.803665,10860.4047 C443.82151,10860.4289 443.838281,10860.4537 443.853933,10860.4793 C443.861393,10860.4914 443.868501,10860.5036 443.875329,10860.5159 C443.886206,10860.5357 443.896623,10860.5561 443.906346,10860.5769 C443.914321,10860.5939 443.921804,10860.6112 443.928775,10860.6287 C443.936684,10860.6484 443.943878,10860.6682 443.950453,10860.6883 C443.955271,10860.7031 443.959902,10860.7185 443.964155,10860.734 C443.970166,10860.7556 443.97536,10860.7773 443.979835,10860.7992 C443.983298,10860.8166 443.986372,10860.8341 443.988982,10860.8515 C443.992033,10860.8715 443.994467,10860.8921 443.996262,10860.9129 C443.997844,10860.9317 443.998905,10860.9497 443.999483,10860.9677 C443.999818,10860.9778 444,10860.9889 444,10861 L444,10867 C444,10867.5523 443.552285,10868 443,10868 C442.447715,10868 442,10867.5523 442,10867 L442,10863.414 L433.707107,10871.7071 C433.316582,10872.0976 432.683418,10872.0976 432.292893,10871.7071 C431.902369,10871.3166 431.902369,10870.6834 432.292893,10870.2929 L440.584,10862 L437,10862 C436.487164,10862 436.064493,10861.614 436.006728,10861.1166 L436,10861 C436,10860.4477 436.447715,10860 437,10860 L443,10860 Z" }) }) }) }));

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

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

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

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

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

@@ -0,0 +1 @@
+export declare const HamburgerIcon: () => import("react/jsx-runtime").JSX.Element;