@ndlib/component-library 0.0.10 → 0.0.14

package/dist/components/elements/Fields/Select/index.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { useFloating, size as sizeMiddleware, offset, autoPlacement, } from '@floating-ui/react';
+import { TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../../theme/typography';
+import { useTheme } from '../../../../theme';
+import { COLOR } from '../../../..';
+import { INPUT_SIZE } from '../TextInput';
+import { ListBox } from '../../ListBox';
+import { BUTTON_SIZE, BUTTON_TYPE, Button } from '../../Button';
+import { defaultRenderOptionLabel, getOptionId, } from '../option';
+import { useUniqueHtmlId } from '../../../../utils/hooks/useUniqueHtmlId';
+import { KEY_CODES } from '../../../../utils/misc';
+const typographyMap = {
+    [INPUT_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
+    [INPUT_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,
+    [INPUT_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
+};
+const defaultHeight = {
+    [INPUT_SIZE.SM]: '2rem',
+    [INPUT_SIZE.MD]: '2.5rem',
+    [INPUT_SIZE.LG]: '3rem',
+};
+const buttonSizeMap = {
+    [INPUT_SIZE.SM]: BUTTON_SIZE.SM,
+    [INPUT_SIZE.MD]: BUTTON_SIZE.MD,
+    [INPUT_SIZE.LG]: BUTTON_SIZE.LG,
+};
+const DEFAULT_WIDTH = '16rem';
+export function Select({ size: sizeParam, placeholder, leftIcon, value, onSelectOption, options, renderOption, renderOptionLabel: renderOptionLabelParam, sx, }) {
+    const theme = useTheme();
+    const listboxId = useUniqueHtmlId('select-list-box');
+    const [isOpen, setIsOpen] = useState(false);
+    const [stagedOptionValue, setStagedOptionValue] = useState();
+    const currentOption = useMemo(() => {
+        return options.find((option) => option.value === value);
+    }, [options, value]);
+    const getNextOptionValue = () => {
+        if (stagedOptionValue) {
+            const currentIndex = options
+                .map((option) => option.value)
+                .indexOf(stagedOptionValue);
+            const nextIndex = Math.min(currentIndex + 1, options.length - 1);
+            return options[nextIndex].value;
+        }
+        else {
+            setIsOpen(true);
+            return options[0].value;
+        }
+    };
+    const getPrevOptionValue = () => {
+        if (stagedOptionValue) {
+            const currentIndex = options
+                .map((option) => option.value)
+                .indexOf(stagedOptionValue);
+            const nextIndex = Math.max(currentIndex - 1, 0);
+            return options[nextIndex].value;
+        }
+        else {
+            setIsOpen(true);
+            return options[options.length - 1].value;
+        }
+    };
+    const [dropdownMinWidth, setDropdownMinWidth] = useState('0px');
+    const { refs, floatingStyles } = useFloating({
+        placement: 'bottom-start',
+        middleware: [
+            offset(2),
+            sizeMiddleware({
+                apply({ rects }) {
+                    setDropdownMinWidth(`${rects.reference.width}px`);
+                },
+            }),
+            autoPlacement({
+                allowedPlacements: ['top-start', 'bottom-start'],
+            }),
+        ],
+    });
+    const close = () => {
+        setStagedOptionValue(undefined);
+        setIsOpen(false);
+    };
+    const open = () => {
+        setStagedOptionValue(stagedOptionValue || value || options[0].value);
+        setIsOpen(true);
+    };
+    const onKeyDown = (e) => {
+        if (e.key === KEY_CODES.ARROW_DOWN) {
+            const nextValue = getNextOptionValue();
+            setStagedOptionValue(nextValue);
+        }
+        if (e.key === KEY_CODES.ARROW_UP) {
+            const prevValue = getPrevOptionValue();
+            setStagedOptionValue(prevValue);
+        }
+        if (e.key === KEY_CODES.ENTER) {
+            if (!isOpen) {
+                open();
+            }
+            if (isOpen && stagedOptionValue && onSelectOption) {
+                onSelectOption(stagedOptionValue);
+                close();
+            }
+        }
+        if (e.key === KEY_CODES.ESCAPE) {
+            close();
+        }
+    };
+    const size = sizeParam || INPUT_SIZE.MD;
+    const buttonSize = buttonSizeMap[size];
+    const height = defaultHeight[size];
+    const typography = typographyMap[size];
+    const typographyStyles = getTypographyStyles(typography);
+    const renderOptionLabel = renderOptionLabelParam || defaultRenderOptionLabel;
+    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ ref: refs.setReference, 
+                // A11y attributes
+                role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
+                    ? getOptionId(stagedOptionValue)
+                    : undefined, 
+                // Style config
+                type: BUTTON_TYPE.OUTLINE, size: buttonSize, onBlur: () => close(), onFocus: () => open(), onKeyDown: onKeyDown, onMouseDown: () => {
+                    if (!isOpen) {
+                        open();
+                    }
+                    else {
+                        close();
+                    }
+                }, sx: Object.assign(Object.assign({ height, width: DEFAULT_WIDTH, border: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, borderRadius: '4px', flexDirection: 'row', alignItems: 'center', position: 'relative', ':hover': {
+                        boxShadow: theme.boxShadow.NORMAL,
+                    }, ':focus': {
+                        boxShadow: theme.boxShadow.NORMAL,
+                    } }, typographyStyles), sx), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (value) => {
+                    onSelectOption && onSelectOption(value);
+                    close();
+                }, ref: refs.setFloating, renderOption: renderOption, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { zIndex: 1 }) }))] }));
+}

package/dist/components/elements/Fields/TextInput/TextInput.stories.d.ts

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

package/dist/components/elements/Fields/TextInput/TextInput.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SearchIcon from '@mui/icons-material/Search';
+import { INPUT_SIZE, TextInput } from '.';
+import { useState } from 'react';
+import { Column } from '../../layout/Column';
+import { Group } from '../../Group';
+import { Heading, HEADING_SIZE } from '../../text/Heading';
+const meta = {
+    title: 'Elements/Fields/TextInput',
+    component: TextInput,
+    tags: ['autodocs'],
+};
+export default meta;
+const sizes = [
+    { label: 'Large', size: INPUT_SIZE.LG },
+    { label: 'Medium', size: INPUT_SIZE.MD },
+    { label: 'Small', size: INPUT_SIZE.SM },
+];
+const StatefulInput = (props) => {
+    const [value, setValue] = useState('');
+    return _jsx(TextInput, Object.assign({ value: value, onChange: setValue }, props));
+};
+export const Default = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", sx: { mt: 1 } })] }))) })),
+};

package/dist/components/elements/Fields/TextInput/index.d.ts

@@ -0,0 +1,17 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import { StyledElementProps } from '../../../../theme';
+export declare enum INPUT_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+type TextInputProps = StyledElementProps<HTMLInputElement, {
+    size?: INPUT_SIZE;
+    leftIcon?: React.FC<any>;
+    inline?: boolean;
+    value: string;
+    onChange: (value: string) => void;
+}, string>;
+export declare const TextInput: React.FC<TextInputProps>;
+export {};

package/dist/components/elements/Fields/TextInput/index.js

@@ -0,0 +1,60 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../../theme/typography';
+import { useTheme } from '../../../../theme';
+import { COLOR } from '../../../..';
+import { Icon } from '../../Icon';
+export var INPUT_SIZE;
+(function (INPUT_SIZE) {
+    INPUT_SIZE["SM"] = "sm";
+    INPUT_SIZE["MD"] = "md";
+    INPUT_SIZE["LG"] = "lg";
+})(INPUT_SIZE || (INPUT_SIZE = {}));
+const typographyMap = {
+    [INPUT_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
+    [INPUT_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,
+    [INPUT_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
+};
+const defaultPaddingX = {
+    [INPUT_SIZE.SM]: 2,
+    [INPUT_SIZE.MD]: 3,
+    [INPUT_SIZE.LG]: 3,
+};
+const defaultHeight = {
+    [INPUT_SIZE.SM]: '2rem',
+    [INPUT_SIZE.MD]: '2.5rem',
+    [INPUT_SIZE.LG]: '3rem',
+};
+export const TextInput = (_a) => {
+    var { value, onChange, inline, size: sizeParam, leftIcon, sx } = _a, rest = __rest(_a, ["value", "onChange", "inline", "size", "leftIcon", "sx"]);
+    const theme = useTheme();
+    const size = sizeParam || INPUT_SIZE.MD;
+    const display = inline === false ? 'flex' : 'inline-flex';
+    const paddingX = defaultPaddingX[size];
+    const height = defaultHeight[size];
+    const typography = typographyMap[size];
+    const typographyStyles = getTypographyStyles(typography);
+    return (_jsxs("div", Object.assign({ sx: Object.assign(Object.assign({ height,
+            display, px: paddingX, border: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, borderRadius: '4px', flexDirection: 'row', alignItems: 'center', ':hover': {
+                boxShadow: theme.boxShadow.NORMAL,
+            }, ':focus': {
+                boxShadow: theme.boxShadow.NORMAL,
+            } }, typographyStyles), sx) }, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, sx: {
+                    mr: 2,
+                    fontSize: getIconSize(typographyStyles.fontSize),
+                } })), _jsx("input", Object.assign({ value: value, onChange: (event) => {
+                    onChange(event.target.value);
+                }, sx: Object.assign(Object.assign({ px: 0, py: 0, border: 'none' }, typographyStyles), { ':focus': {
+                        outline: 'none',
+                    } }) }, rest))] })));
+};

package/dist/components/elements/Fields/option.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export type Key = string | number;
+export interface BasicOption<Value extends Key> {
+    value: Value;
+    label?: string;
+}
+export type RenderOption<Value extends Key, Option extends BasicOption<Value>> = (params: {
+    option: Option;
+    selected?: boolean;
+    focused?: boolean;
+}) => React.ReactNode;
+export type RenderOptionLabel<Option extends BasicOption<Key>> = (option: Option) => string;
+export declare const getOptionId: (value: Key) => string;
+export declare const defaultRenderOption: RenderOption<Key, any>;
+export declare const defaultRenderOptionLabel: RenderOptionLabel<any>;

package/dist/components/elements/Fields/option.js

@@ -0,0 +1,3 @@
+export const getOptionId = (value) => `option-id-${value}`;
+export const defaultRenderOption = ({ option }) => option.label;
+export const defaultRenderOptionLabel = (option) => option.label;

package/dist/components/elements/Group/index.js

@@ -22,13 +22,13 @@ export var GROUP_TYPE;
 const GROUP_TYPE_ROLE_MAP = {
     [GROUP_TYPE.REGION]: 'region',
     [GROUP_TYPE.GROUP]: 'group',
-    [GROUP_TYPE.RAW]: 'group'
+    [GROUP_TYPE.RAW]: 'group',
 };
 const GroupContext = React.createContext({
     level: 0,
     labelId: '',
     labelTargetId: '',
-    trackHeadingRendered: () => { }
+    trackHeadingRendered: () => { },
 });
 export const useGroup = () => React.useContext(GroupContext);
 export const Group = (_a) => {
@@ -40,7 +40,7 @@ export const Group = (_a) => {
     const labelId = `group-label-${randomSlug}`;
     const labelTargetId = `labeled-${randomSlug}`;
     const headingRenderTracker = useRef({
-        hasHeadingRendered: false
+        hasHeadingRendered: false,
     });
     const trackHeadingRendered = () => {
         headingRenderTracker.current.hasHeadingRendered = true;

package/dist/components/elements/Icon/Icon.stories.d.ts

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

package/dist/components/elements/Icon/Icon.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GROUP_TYPE, Group } from '../Group';
+import { HEADING_SIZE, Heading } from '../text/Heading';
+import { Column } from '../layout/Column';
+import { Icon } from './';
+import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';
+import { COLOR } from '../../../theme/colors';
+import { FONT_SIZE } from '../../../theme/typography';
+const meta = {
+    title: 'Elements/Icon',
+    component: Icon,
+};
+export default meta;
+const sizes = [
+    { size: FONT_SIZE.XXL, label: 'XX Large' },
+    { size: FONT_SIZE.XL, label: 'X Large' },
+    { size: FONT_SIZE.LG, label: 'Large' },
+    { size: FONT_SIZE.ML, label: 'Medium Large' },
+    { size: FONT_SIZE.MD, label: 'Medium' },
+    { size: FONT_SIZE.MS, label: 'Medium Small' },
+    { size: FONT_SIZE.SM, label: 'Small' },
+    { size: FONT_SIZE.XS, label: 'X Small' },
+];
+export const Default = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Icon, { icon: AccessAlarmIcon, size: size.size })] })))) })),
+};
+export const CustomColor = {
+    render: () => (_jsx(Icon, { icon: AccessAlarmIcon, color: COLOR.SECONDARY, size: FONT_SIZE.LG })),
+};

package/dist/components/elements/Icon/Icon.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Icon/Icon.test.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { Icon } from '.';
+import { SPACING } from '../../../theme';
+import { FONT_SIZE, fontSizeMap } from '../../../theme/typography';
+const MockIcon = () => {
+    return _jsx("div", { children: "Mock Icon" });
+};
+describe('Icon', () => {
+    it('renders component passed to it', () => {
+        const { getByText } = render(_jsx(Icon, { icon: MockIcon }));
+        expect(getByText('Mock Icon')).toBeInTheDocument();
+    });
+    it('passes font size to outer wrapper', () => {
+        const { container } = render(_jsx(Icon, { icon: MockIcon, size: FONT_SIZE.MD }));
+        expect(container.childNodes[0]).toHaveStyle({
+            fontSize: fontSizeMap[FONT_SIZE.MD],
+        });
+    });
+    it('passes custom styles to outer wrapper', () => {
+        const { container } = render(_jsx(Icon, { icon: MockIcon, sx: { p: 1 } }));
+        expect(container.childNodes[0]).toHaveStyle({
+            padding: SPACING[1],
+        });
+    });
+});

package/dist/components/elements/Icon/index.d.ts

@@ -0,0 +1,11 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import { COLOR } from '../../../theme/colors';
+import { StyledElementProps } from '../../../theme';
+import { FONT_SIZE } from '../../../theme/typography';
+export type IconProps = StyledElementProps<HTMLDivElement, {
+    icon: React.FC<any>;
+    size?: FONT_SIZE;
+    color?: COLOR;
+}>;
+export declare const Icon: React.FC<IconProps>;

package/dist/components/elements/Icon/index.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import { COLOR, colors } from '../../../theme/colors';
+export const Icon = (_a) => {
+    var { icon, size, color, sx } = _a, rest = __rest(_a, ["icon", "size", "color", "sx"]);
+    const InnerComponent = icon;
+    return (_jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign({}, sx), { fontSize: size, display: 'flex', alignItems: 'center', justifyContent: 'center' }) }, { children: React.createElement(InnerComponent, {
+            fontSize: 'inherit',
+            sx: {
+                color: colors[color || COLOR.PRIMARY],
+            },
+        }) })));
+};

package/dist/components/elements/Link/Link.stories.js

@@ -14,8 +14,8 @@ const sizes = [
     { size: LINK_SIZE.SM, label: 'Small' },
 ];
 export const Default = {
-    render: () => (_jsx(Column, { children: sizes.map(size => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Link, Object.assign({ size: size.size, to: "/" }, { children: "Click Me" }))] }))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Link, Object.assign({ size: size.size, to: "/" }, { children: "Click Me" }))] }))) })),
     args: {
-        children: "Click Me"
-    }
+        children: 'Click Me',
+    },
 };

package/dist/components/elements/Link/Link.test.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { render } from '../../../utils/test';
-import { Link } from ".";
+import { Link } from '.';
 import { DefaultLink } from '../../providers/componentConfig';
 const CUSTOM_INTERNAL_TEST_ID = 'internal-link-test-id';
 const CUSTOM_EXTERNAL_TEST_ID = 'external-link-test-id';
 const CustomInternalLink = (props) => {
-    return (_jsx(DefaultLink, Object.assign({ "data-testid": CUSTOM_INTERNAL_TEST_ID }, props)));
+    return _jsx(DefaultLink, Object.assign({ "data-testid": CUSTOM_INTERNAL_TEST_ID }, props));
 };
 const CustomExternalLink = (props) => {
-    return (_jsx(DefaultLink, Object.assign({ "data-testid": CUSTOM_EXTERNAL_TEST_ID }, props)));
+    return _jsx(DefaultLink, Object.assign({ "data-testid": CUSTOM_EXTERNAL_TEST_ID }, props));
 };
 describe('Link', () => {
     it('renders default external link component without throwing', () => {
@@ -24,9 +24,9 @@ describe('Link', () => {
             components: {
                 link: {
                     externalLinkComponent: CustomExternalLink,
-                    internalLinkComponent: CustomInternalLink
-                }
-            }
+                    internalLinkComponent: CustomInternalLink,
+                },
+            },
         });
         expect(getByTestId(CUSTOM_EXTERNAL_TEST_ID)).toBeDefined();
         expect(() => getByTestId(CUSTOM_INTERNAL_TEST_ID)).toThrow();
@@ -36,21 +36,21 @@ describe('Link', () => {
             components: {
                 link: {
                     externalLinkComponent: CustomExternalLink,
-                    internalLinkComponent: CustomInternalLink
-                }
-            }
+                    internalLinkComponent: CustomInternalLink,
+                },
+            },
         });
         expect(getByTestId(CUSTOM_INTERNAL_TEST_ID)).toBeDefined();
         expect(() => getByTestId(CUSTOM_EXTERNAL_TEST_ID)).toThrow();
     });
     it('passes styles to custom component', () => {
-        const { getByTestId } = render((_jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ to: "https://google.com", sx: { mt: 1 } }, { children: "Foo" })), _jsx(Link, Object.assign({ to: "/test/route", sx: { mt: 1 } }, { children: "Foo" }))] })), {
+        const { getByTestId } = render(_jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ to: "https://google.com", sx: { mt: 1 } }, { children: "Foo" })), _jsx(Link, Object.assign({ to: "/test/route", sx: { mt: 1 } }, { children: "Foo" }))] }), {
             components: {
                 link: {
                     externalLinkComponent: CustomExternalLink,
-                    internalLinkComponent: CustomInternalLink
-                }
-            }
+                    internalLinkComponent: CustomInternalLink,
+                },
+            },
         });
         expect(getByTestId(CUSTOM_EXTERNAL_TEST_ID)).toHaveStyle(`margin-top: 0.25rem`);
         expect(getByTestId(CUSTOM_INTERNAL_TEST_ID)).toHaveStyle(`margin-top: 0.25rem`);

package/dist/components/elements/Link/index.d.ts

@@ -1,6 +1,6 @@
 /** @jsxImportSource theme-ui */
-import React from "react";
-import { StyledElementProps } from "../../../theme";
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
 type LinkProps = StyledElementProps<HTMLSpanElement, {
     to: string;
     size?: LINK_SIZE;

package/dist/components/elements/Link/index.js

@@ -10,9 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import { useComponentConfig } from "../../providers/componentConfig";
-import { COLOR } from "../../../theme/colors";
-import { TYPOGRAPHY_TYPE, getTypographyStyles } from "../../../theme/typography";
+import { useComponentConfig } from '../../providers/componentConfig';
+import { COLOR } from '../../../theme/colors';
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
 export var LINK_SIZE;
 (function (LINK_SIZE) {
     LINK_SIZE["SM"] = "sm";
@@ -22,7 +22,7 @@ export var LINK_SIZE;
 const SIZE_TYPOGRAPHY_MAP = {
     [LINK_SIZE.SM]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
     [LINK_SIZE.MD]: TYPOGRAPHY_TYPE.CONTROL_MEDIUM,
-    [LINK_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_LARGE
+    [LINK_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_LARGE,
 };
 export const Link = (_a) => {
     var { size, to, sx } = _a, rest = __rest(_a, ["size", "to", "sx"]);

package/dist/components/elements/List/List.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { List } from './index';
+declare const meta: Meta<typeof List>;
+export default meta;
+type Story = StoryObj<typeof List>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Ordered: Story;
+export declare const CustomIcon: Story;

package/dist/components/elements/List/List.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { LIST_SIZE, List, ListItem } from './index';
+import { Row } from '../layout/Row';
+import { Column } from '../layout/Column';
+import { HEADING_SIZE, Heading } from '../text/Heading';
+import { GROUP_TYPE, Group } from '../Group';
+import { COLOR } from '../../..';
+const meta = {
+    title: 'Elements/List',
+    component: List,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(Row, { children: _jsxs(List, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsxs(ListItem, Object.assign({ index: 2 }, { children: ["List Item 3", _jsxs(List, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "List Item 3.1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "List Item 3.2" }))] })] }))] }) })),
+};
+const sizes = [
+    { size: LIST_SIZE.LG, label: 'Large' },
+    { size: LIST_SIZE.MD, label: 'Medium' },
+    { size: LIST_SIZE.SM, label: 'Small' },
+];
+export const Sizes = {
+    render: () => (_jsx(Column, { children: sizes.map((size, i) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION, sx: { mt: 3 } }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(Row, Object.assign({ sx: { mt: 2 } }, { children: _jsxs(List, Object.assign({ size: size.size }, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsx(ListItem, Object.assign({ index: 2 }, { children: "List Item 3" }))] })) }))] }), i))) })),
+};
+export const Ordered = {
+    render: () => (_jsx(Row, { children: _jsxs(List, Object.assign({ icon: ChevronRightIcon, ordered: true }, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsx(ListItem, Object.assign({ index: 2 }, { children: "List Item 3" }))] })) })),
+};
+export const CustomIcon = {
+    render: () => (_jsx(Row, { children: _jsxs(List, Object.assign({ icon: ChevronRightIcon, iconColor: COLOR.PRIMARY }, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsx(ListItem, Object.assign({ index: 2 }, { children: "List Item 3" }))] })) })),
+};

package/dist/components/elements/List/List.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/List/List.test.js

@@ -0,0 +1,24 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { List, ListItem } from '.';
+const MockIcon = () => _jsx("div", { "data-testid": "mock-icon" });
+describe('List', () => {
+    it('renders children inside list', () => {
+        const { getByRole, getAllByRole } = render(_jsxs(List, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "Item 1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "Item 2" }))] }));
+        expect(getByRole('list')).toBeDefined();
+        expect(getAllByRole('listitem')).toHaveLength(2);
+    });
+    it('renders custom component if provided', () => __awaiter(void 0, void 0, void 0, function* () {
+        const { getAllByTestId } = render(_jsxs(List, Object.assign({ icon: MockIcon }, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "Item 1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "Item 2" }))] })));
+        expect(getAllByTestId('mock-icon')).toHaveLength(2);
+    }));
+});

package/dist/components/elements/List/index.d.ts

@@ -0,0 +1,21 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+import { COLOR } from '../../..';
+type ListProps = StyledElementProps<HTMLUListElement, {
+    ordered?: boolean;
+    size?: LIST_SIZE;
+    icon?: React.FC<any>;
+    iconColor?: COLOR;
+}>;
+export declare enum LIST_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare const List: React.FC<ListProps>;
+type ListItemProps = StyledElementProps<HTMLLIElement, {
+    index: number;
+}>;
+export declare const ListItem: React.FC<ListItemProps>;
+export {};