@hlf-fe/pulmo-ui 1.0.1 → 1.2.0

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const HamburgerIcon = () => (_jsx("svg", { width: "30px", height: "19px", viewBox: "0 0 30 19", fill: "#333333", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: _jsx("g", { transform: "translate(-326.000000, -113.000000)", children: _jsx("g", { transform: "translate(0.000000, 94.000000)", children: _jsx("path", { d: "M326,19 L356,19 L356,22 L326,22 Z M326,27 L356,27 L356,30 L326,30 Z M326,35 L356,35 L356,38 L326,38 Z" }) }) }) }) }));

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const HeartIcon = () => (_jsx("svg", { width: "20px", height: "18px", viewBox: "0 0 20 18", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: _jsx("g", { id: "navigation_1440_1", transform: "translate(-337.000000, -220.000000)", fill: "#ED1B2F", fillRule: "nonzero", children: _jsx("g", { id: "Group-23", transform: "translate(0.000000, 128.000000)", children: _jsx("g", { id: "Group-16", transform: "translate(128.000000, 0.000000)", children: _jsx("g", { id: "Group-15", transform: "translate(80.000000, 32.000000)", children: _jsx("path", { d: "M143.961126,60.790431 C142.253052,60.6643448 140.432682,61.3962357 139.210237,62.6994547 L139.134389,62.7802287 L139.05854,62.6994547 C137.927704,61.4927704 136.283659,60.7766403 134.690836,60.7766403 C134.562779,60.7766403 134.434723,60.7815655 134.307652,60.790431 C132.310959,60.9381882 130.761478,62.1694987 130.050273,64.1691469 C129.145013,66.7253474 130.275849,69.6056288 133.414213,72.7311873 C135.013394,74.2978159 136.778889,75.6851081 138.679296,76.8683905 L138.954125,77.0319085 C139.065219,77.0979816 139.203558,77.0979816 139.314653,77.0319085 L139.589481,76.8683905 C141.489053,75.6839171 143.254424,74.2967226 144.854565,72.7311873 C147.991944,69.6056288 149.123764,66.7223923 148.21752,64.1691469 C147.5073,62.1694987 145.954864,60.9401583 143.961126,60.790431 Z", id: "heart_icon_red" }) }) }) }) }) }) }));

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

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

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

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

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;

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/menu-close-icon/menu-close-icon.d.ts

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

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MenuCloseIcon = () => (_jsx("svg", { width: "24px", height: "25px", viewBox: "0 0 24 25", version: "1.1", fill: "#333333", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: _jsx("g", { transform: "translate(-329.000000, -110.000000)", children: _jsx("path", { d: "M350.545942,110.832738 L352.667262,112.954058 L343.120738,122.499738 L352.667262,132.045942 L350.545942,134.167262 L340.999738,124.620738 L331.454058,134.167262 L329.332738,132.045942 L338.878738,122.499738 L329.332738,112.954058 L331.454058,110.832738 L340.999738,120.378738 L350.545942,110.832738 Z" }) }) }) }));

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

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

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

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

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;