@hlf-fe/pulmo-ui 1.0.1 → 1.1.0

package/dist/components/icons/loading-spinner/loading-spinner.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { keyframes } from "styled-components";
+import { rem } from "../../../styles/units";
+export const LoadingSpinner = ({ color, className, size = "m", }) => {
+    const width = {
+        s: rem(16),
+        m: rem(32),
+        l: rem(64),
+    };
+    const padding = {
+        s: rem(2),
+        m: rem(4),
+        l: rem(8),
+    };
+    return (_jsx(Spinner, { className: className, color: color, size: size, width: width, padding: padding }));
+};
+const rotate = keyframes `
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const Spinner = styled.div `
+  width: ${({ width, size }) => width?.[size]};
+  padding: ${({ padding, size }) => padding?.[size]};
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: ${({ color, theme }) => (color ? color : theme?.blueNavy)};
+  mask: conic-gradient(#0000 0, #000), linear-gradient(#000 0 0) content-box;
+  mask-composite: source-out;
+  -webkit-mask-composite: source-out;
+  animation: ${rotate} 1s infinite linear;
+`;

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

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

package/dist/components/icons/loading-spinner/loading-spinner.stories.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoadingSpinner } from "./loading-spinner";
+import { Decorator } from "../../../components/decorator/decorator";
+import { COLORS } from "../../../styles/theme";
+const meta = {
+    title: "Icons/LoadingSpinner",
+    component: LoadingSpinner,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        size: "m",
+        color: COLORS.red,
+    },
+};

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

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

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { COLORS } from "../../../styles/theme";
+export const SearchIcon = ({ color = COLORS.blackLight, width = 32, height = 32, }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: `0 0 32 32`, children: _jsx("path", { fill: color, d: "M16 6a9 9 0 0 1 7.032 14.617l3.675 3.676a1 1 0 0 1-1.32 1.497l-.094-.083-3.676-3.675A9 9 0 1 1 16 6zm0 2a7 7 0 1 0 4.865 12.033.732.732 0 0 1 .078-.09l.09-.078A7 7 0 0 0 16 8z" }) }));

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

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

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

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

package/dist/components/icons/toggable-chevron/toggable-chevron.d.ts

@@ -0,0 +1,12 @@
+type ToggableChevronProps = {
+    toggled?: boolean;
+    disableCircle?: boolean;
+    className?: string;
+    rotation?: number;
+};
+type ChevronDownProps = {
+    className?: string;
+};
+export declare const ChevronDownIcon: ({ className }: ChevronDownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToggableChevron: ({ toggled, disableCircle, rotation, className, }: ToggableChevronProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icons/toggable-chevron/toggable-chevron.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+export const ChevronDownIcon = ({ className }) => (_jsx("svg", { width: "16px", height: "16px", viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg", fill: "#333333", className: className, children: _jsx("path", { d: "M2.29289322,5.29289322 C2.65337718,4.93240926 3.22060824,4.90467972 3.61289944,5.20970461 L3.70710678,5.29289322 L8,9.585 L12.2928932,5.29289322 C12.6533772,4.93240926 13.2206082,4.90467972 13.6128994,5.20970461 L13.7071068,5.29289322 C14.0675907,5.65337718 14.0953203,6.22060824 13.7902954,6.61289944 L13.7071068,6.70710678 L8.70710678,11.7071068 C8.34662282,12.0675907 7.77939176,12.0953203 7.38710056,11.7902954 L7.29289322,11.7071068 L2.29289322,6.70710678 C1.90236893,6.31658249 1.90236893,5.68341751 2.29289322,5.29289322 Z" }) }));
+export const ToggableChevron = ({ toggled, disableCircle = true, rotation, className, }) => (_jsx(Chevron, { toggled: toggled, disableCircle: disableCircle, rotation: rotation, className: className, children: _jsx(ChevronDownIcon, {}) }));
+const Chevron = styled.div `
+  width: 22px;
+  height: 22px;
+  border: 1px solid rgba(19, 20, 21, 0.2);
+  border-radius: 50%;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+
+  ${({ toggled, disableCircle, rotation }) => css `
+    transform: scaleY(${toggled ? -1 : 1})
+      ${rotation && `rotate(${rotation}deg)`};
+    border-width: ${toggled || disableCircle ? 0 : 1};
+  `};
+`;

package/dist/components/icons/toggable-chevron/toggable-chevron.stories.d.ts

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

package/dist/components/icons/toggable-chevron/toggable-chevron.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToggableChevron } from "./toggable-chevron";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Icons/ToggableChevron",
+    component: ToggableChevron,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        toggled: false,
+    },
+};
+export const Toggled = {
+    args: {
+        toggled: true,
+    },
+};

package/dist/components/icons/toggable-plus-minus-icon/toggable-plus-minus-icon.d.ts

@@ -0,0 +1,6 @@
+export declare const ToggablePlusMinusIcon: ({ isOpen, width, height, className, }: {
+    isOpen?: boolean;
+    width?: number;
+    height?: number;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/toggable-plus-minus-icon/toggable-plus-minus-icon.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+export const ToggablePlusMinusIcon = ({ isOpen = false, width = 14, height = 14, className = "", }) => {
+    return (_jsxs(Svg, { className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 160 160", width: width, height: height, isOpen: isOpen, children: [_jsx(Rect, { isOpen: isOpen, x: "70", width: "20", height: "160" }), _jsx(Rect, { y: "70", width: "160", height: "20" })] }));
+};
+const Svg = styled.svg `
+  cursor: pointer;
+`;
+const Rect = styled.rect `
+  transition: transform 250ms ease-in-out;
+  transform-origin: 50% 50%;
+  transform: ${({ isOpen }) => (!isOpen ? "scaleY(1)" : "scaleY(0)")};
+`;

package/dist/components/icons/toggable-plus-minus-icon/toggable-plus-minus-icon.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToggablePlusMinusIcon } from "./toggable-plus-minus-icon";
+declare const meta: Meta<typeof ToggablePlusMinusIcon>;
+export default meta;
+type Story = StoryObj<typeof ToggablePlusMinusIcon>;
+export declare const Default: Story;
+export declare const Toggled: Story;

package/dist/components/icons/toggable-plus-minus-icon/toggable-plus-minus-icon.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToggablePlusMinusIcon } from "./toggable-plus-minus-icon";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Icons/ToggablePlusMinusIcon",
+    component: ToggablePlusMinusIcon,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        isOpen: false,
+    },
+};
+export const Toggled = {
+    args: {
+        isOpen: true,
+    },
+};

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

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

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { COLORS } from "../../../styles/theme";
+export const WarningIcon = ({ color = COLORS.red }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, children: _jsx("path", { fill: color, fillRule: "nonzero", d: "M16.447 6c1.049 0 2.021.548 2.568 1.449l8.478 14.154a3 3 0 0 1-2.576 4.5H7.966a3 3 0 0 1-2.557-4.514l8.473-14.145A3 3 0 0 1 16.447 6Zm0 2a.998.998 0 0 0-.852.477L7.133 22.603a1 1 0 0 0 .844 1.5h16.929a1 1 0 0 0 .863-1.486L17.302 8.48A1 1 0 0 0 16.447 8Zm.01 12.103a1 1 0 0 1 .117 1.993l-.127.007a1 1 0 0 1-.117-1.994l.127-.006Zm-.01-8a1 1 0 0 1 .993.883l.007.117v4a1 1 0 0 1-1.993.116l-.007-.116v-4a1 1 0 0 1 1-1Z" }) }));

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

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

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

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

package/dist/components/inputs/dropdown/dropdown-list-item.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    label: string;
+    onClick: () => void;
+};
+export declare const DropdownListItem: ({ label, onClick }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/dropdown/dropdown-list-item.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { rem } from "../../../styles/units";
+export const DropdownListItem = ({ label, onClick }) => {
+    return (_jsx(ListItem, { children: _jsx(ListElement, { onClick: onClick, children: _jsx(Paragraph, { children: label }) }) }));
+};
+const ListItem = styled.li `
+  padding: 0;
+  margin: 0;
+  margin-bottom: ${rem(1)};
+`;
+const ListElement = styled.button `
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  margin: 0;
+  padding: ${rem(12)} ${rem(6)};
+  border: none;
+  border-radius: ${rem(4)};
+  background: white;
+  cursor: pointer;
+
+  &:hover,
+  :focus-visible {
+    background-color: ${({ theme }) => theme.grayLight};
+  }
+`;
+const Paragraph = styled.p `
+  font-family: ${({ theme }) => theme.valueRegular};
+  font-size: ${rem(16)};
+  margin: 0;
+`;

package/dist/components/inputs/dropdown/dropdown.d.ts

@@ -0,0 +1,13 @@
+export type DropdownItem = {
+    label: string;
+    value: string | boolean;
+};
+export type DropdownProps = {
+    prefix?: string;
+    id?: string;
+    items: DropdownItem[];
+    className?: string;
+    onItemSelected: (_: DropdownItem) => void;
+    initialValue: DropdownItem;
+};
+export declare const Dropdown: ({ prefix, items, id, className, onItemSelected, initialValue, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/dropdown/dropdown.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import { ToggableChevron } from "../../../components/icons/toggable-chevron/toggable-chevron";
+import { DropdownListItem } from "./dropdown-list-item";
+import { media } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
+export const Dropdown = ({ prefix, items, id, className, onItemSelected, initialValue, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedItem, setItem] = useState(initialValue || items?.[0] || undefined);
+    const ref = useRef(null);
+    useEffect(() => {
+        const handleClickOutsideMenu = (e) => {
+            if (ref.current && !ref.current.contains(e?.target)) {
+                setIsOpen(false);
+                document.removeEventListener("click", handleClickOutsideMenu, {
+                    capture: true,
+                });
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("click", handleClickOutsideMenu, {
+                capture: true,
+            });
+        }
+        else {
+            document.removeEventListener("click", handleClickOutsideMenu, {
+                capture: true,
+            });
+        }
+    }, [isOpen]);
+    return (_jsxs(Container, { className: className, ref: ref, children: [_jsxs(DropdownButton, { id: id, onClick: () => setIsOpen(!isOpen), "aria-haspopup": "menu", "aria-controls": "dropdown-menu", isOpen: isOpen, children: [_jsxs(TextContainer, { children: [prefix && _jsx(Prefix, { children: `${prefix}:` }), _jsx(Label, { children: selectedItem?.label })] }), _jsx(StyledToggle, { toggled: isOpen })] }), _jsx(Content, { id: "dropdown-menu", "aria-expanded": isOpen, "aria-hidden": !isOpen, role: "menu", children: items.map((item, i) => (_jsx(DropdownListItem, { label: item.label, onClick: () => {
+                        setIsOpen(false);
+                        setItem(item);
+                        onItemSelected(item);
+                    } }, i))) })] }));
+};
+const Container = styled.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+`;
+const DropdownButton = styled.button `
+  display: flex;
+  align-items: center;
+  height: ${rem(48)};
+  font-size: ${rem(16)};
+  background-color: ${({ theme }) => theme.white};
+  border: ${rem(1)} solid ${({ theme }) => theme.grayTransparent};
+  border-radius: ${({ isOpen }) => isOpen ? `${rem(5)} ${rem(5)} 0 0` : rem(5)};
+  border-bottom: ${({ isOpen, theme }) => isOpen ? "none" : `$(${rem(1)}) solid ${theme.grayTransparent}`};
+  padding: 0 ${rem(14)};
+  cursor: pointer;
+
+  ${({ isOpen, theme }) => {
+    return css `
+      ${media.M `
+      &:hover, :focus-visible {
+        border: ${rem(1)} solid ${theme.gray};
+        border-bottom: ${isOpen ? "none" : `${rem(1)} solid ${theme.gray}`};
+      }
+  `}
+    `;
+}}
+`;
+const TextContainer = styled.div `
+  display: flex;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+const StyledToggle = styled(ToggableChevron).attrs({
+    disableCircle: true,
+}) `
+  margin-left: auto;
+  padding-left: ${rem(8)};
+`;
+const Content = styled.ul `
+  position: absolute;
+  width: 100%;
+  max-height: ${rem(250)};
+  top: ${rem(48)};
+  list-style: none;
+  background-color: ${({ theme }) => theme.white};
+  border: ${rem(1)} solid ${({ theme }) => theme.grayTransparent};
+  border-radius: ${rem(5)};
+  padding: 0 ${rem(6)};
+  margin: 0;
+  visibility: hidden;
+  overflow-y: scroll;
+
+  &[aria-expanded="true"] {
+    visibility: visible;
+    border-radius: 0 0 ${rem(5)} ${rem(5)};
+    border-top: 0;
+  }
+`;
+const Label = styled.p `
+  font-family: ${({ theme }) => theme.valueBold};
+  font-size: ${rem(16)};
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const Prefix = styled(Label) `
+  font-family: ${({ theme }) => theme.valueRegular};
+  margin-right: ${rem(6)};
+  overflow: unset;
+`;

package/dist/components/inputs/dropdown/dropdown.stories.d.ts

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

package/dist/components/inputs/dropdown/dropdown.stories.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Decorator } from "../../../components/decorator/decorator";
+import { Dropdown } from "./dropdown";
+const meta = {
+    title: "Inputs/Dropdown",
+    component: Dropdown,
+    decorators: [
+        (Story) => (_jsx(Decorator, { maxWidth: "250px", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        items: [
+            {
+                label: "2025",
+                value: "2025",
+            },
+            {
+                label: "2024",
+                value: "2024",
+            },
+            {
+                label: "2023",
+                value: "2023",
+            },
+            {
+                label: "2022",
+                value: "2022",
+            },
+            {
+                label: "2021",
+                value: "2021",
+            },
+            {
+                label: "2020",
+                value: "2020",
+            },
+            {
+                label: "2019",
+                value: "2019",
+            },
+            {
+                label: "2018",
+                value: "2018",
+            },
+            {
+                label: "2017",
+                value: "2017",
+            },
+            {
+                label: "2016",
+                value: "2016",
+            },
+            {
+                label: "2015",
+                value: "2015",
+            },
+            {
+                label: "2014",
+                value: "2014",
+            },
+            {
+                label: "2013",
+                value: "2013",
+            },
+        ],
+    },
+};
+export const WithPrefix = {
+    args: {
+        prefix: "Sort by",
+        items: [
+            {
+                label: "Latest first",
+                value: "newest",
+            },
+            {
+                label: "Oldest first",
+                value: "oldest",
+            },
+        ],
+    },
+};

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

@@ -0,0 +1,11 @@
+import { FieldErrors } from "react-hook-form";
+export type FormErrorProps = {
+    errors: FieldErrors;
+    name: string;
+    className?: string;
+    alignLeft?: boolean;
+};
+export type StyledFormErrorProps = {
+    alignLeft?: boolean;
+};
+export declare const FormError: ({ errors, name, className, alignLeft, }: FormErrorProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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