@ndlib/component-library 0.0.7-9.1

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

@@ -0,0 +1,119 @@
+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 React from 'react';
+import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../../theme/typography';
+import { useTheme } from '../../../../theme';
+import { Icon } from '../../Icon';
+import { COLOR } from '../../../../theme/colors';
+import { Label } from '../../text/Label';
+import { useUniqueId } from '../../../providers/uniqueIds';
+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,
+};
+export const labelTypographyMap = {
+    [INPUT_SIZE.SM]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [INPUT_SIZE.MD]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [INPUT_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_MEDIUM,
+};
+export const labelOffsetMap = {
+    [INPUT_SIZE.SM]: '-0.375rem',
+    [INPUT_SIZE.MD]: '-0.45rem',
+    [INPUT_SIZE.LG]: '-0.5rem',
+};
+const defaultPaddingX = {
+    [INPUT_SIZE.SM]: 2,
+    [INPUT_SIZE.MD]: 3,
+    [INPUT_SIZE.LG]: 3,
+};
+const defaultHeight = {
+    [INPUT_SIZE.SM]: '2.25rem',
+    [INPUT_SIZE.MD]: '2.5rem',
+    [INPUT_SIZE.LG]: '3rem',
+};
+export const TextInput = React.forwardRef((_a, ref) => {
+    var { value, label, onChange, onChangeRaw, onClick, inline, inverted, size: sizeParam, leftIcon, sx, disabled } = _a, rest = __rest(_a, ["value", "label", "onChange", "onChangeRaw", "onClick", "inline", "inverted", "size", "leftIcon", "sx", "disabled"]);
+    const id = useUniqueId('text-input');
+    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);
+    const focusStyles = disabled
+        ? {}
+        : {
+            boxShadow: inverted
+                ? theme.boxShadow.INVERTED
+                : theme.boxShadow.NORMAL,
+        };
+    return (_jsxs("div", Object.assign({ ref: ref, onClick: onClick, id: id, sx: Object.assign(Object.assign({ height,
+            display, px: paddingX, backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, borderRadius: '4px', flexDirection: 'row', position: 'relative', alignItems: 'center', ':hover': focusStyles, ':focus': focusStyles }, typographyStyles), sx) }, { children: [_jsx("fieldset", Object.assign({ sx: {
+                    textAlign: 'left',
+                    position: 'absolute',
+                    inset: '-4px 0px 0px 0px',
+                    margin: '0px',
+                    padding: '0px 0.5rem',
+                    pointerEvents: 'none',
+                    borderRadius: 'inherit',
+                    borderStyle: 'solid',
+                    borderWidth: '1px',
+                    overflow: 'hidden',
+                    minWidth: '0%',
+                    borderColor: inverted ? COLOR.GRAY : COLOR.LIGHT_GRAY,
+                    zIndex: theme.zIndex.ELEVATED,
+                }, "aria-ignore": true }, { children: _jsx("legend", Object.assign({ style: {
+                        width: 'auto',
+                        float: 'unset',
+                        overflow: 'hidden',
+                        position: 'relative',
+                        display: 'block',
+                        padding: '0',
+                        height: '8px',
+                        fontSize: '0.75em',
+                        visibility: 'hidden',
+                        whiteSpace: 'nowrap',
+                    } }, { children: label && (_jsx(Label, Object.assign({ standalone: true, "aria-hidden": "true", sx: {
+                            px: 1,
+                            position: 'relative',
+                            display: 'inline-flex',
+                            opacity: '0',
+                            visibility: 'hidden',
+                        }, typography: labelTypographyMap[size] }, { children: label }))) })) })), leftIcon && (_jsx(Icon, { icon: leftIcon, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: {
+                    mr: 2,
+                    fontSize: getIconSize(typographyStyles.fontSize),
+                } })), _jsx("input", Object.assign({ value: value, onChange: (event) => {
+                    onChange && onChange(event.target.value);
+                    onChangeRaw && onChangeRaw(event);
+                }, sx: Object.assign(Object.assign({ px: 0, py: 0, width: '100%', border: 'none', backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT }, typographyStyles), { '::placeholder': {
+                        color: inverted ? COLOR.LIGHT_GRAY : COLOR.GRAY,
+                    }, ':focus': {
+                        outline: 'none',
+                    } }), disabled: disabled }, rest)), label && (_jsx(Label, Object.assign({ htmlFor: id, typography: labelTypographyMap[size], sx: {
+                    position: 'absolute',
+                    color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.ND_PROVOST_BLUE,
+                    left: '0.5rem',
+                    lineHeight: 1,
+                    zIndex: theme.zIndex.ELEVATED,
+                    px: 1,
+                    top: labelOffsetMap[size],
+                } }, { children: label })))] })));
+});

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export type Key = string | number;
+export interface BasicOption<Value extends Key> {
+    value: Value;
+    label?: string;
+    onClick?: () => void;
+}
+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.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+type GroupContextType = {
+    level: number;
+    labelId: string;
+    trackHeadingRendered: () => void;
+    labelTargetId: string;
+    type?: GROUP_TYPE;
+};
+export declare enum GROUP_TYPE {
+    REGION = "region",
+    GROUP = "group",
+    RAW = "raw"
+}
+export declare const useGroup: () => GroupContextType;
+type GroupProps = Omit<StyledElementProps<HTMLDivElement, {
+    type?: GROUP_TYPE;
+}>, 'children'> & {
+    children: React.ReactNode | ((context: GroupContextType) => React.ReactNode);
+};
+export declare const Group: React.FC<GroupProps>;
+export {};

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

@@ -0,0 +1,69 @@
+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";
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useEnvironment } from '../../providers/env';
+export var GROUP_TYPE;
+(function (GROUP_TYPE) {
+    GROUP_TYPE["REGION"] = "region";
+    GROUP_TYPE["GROUP"] = "group";
+    GROUP_TYPE["RAW"] = "raw";
+})(GROUP_TYPE || (GROUP_TYPE = {}));
+const GROUP_TYPE_ROLE_MAP = {
+    [GROUP_TYPE.REGION]: 'region',
+    [GROUP_TYPE.GROUP]: 'group',
+    [GROUP_TYPE.RAW]: 'group',
+};
+const GroupContext = React.createContext({
+    level: 0,
+    labelId: '',
+    labelTargetId: '',
+    trackHeadingRendered: () => { },
+});
+export const useGroup = () => React.useContext(GroupContext);
+export const Group = (_a) => {
+    var { type: typeProp, children, sx } = _a, rest = __rest(_a, ["type", "children", "sx"]);
+    const { level: parentLevel } = useGroup();
+    const { flagInDevelopment } = useEnvironment();
+    const type = typeProp || GROUP_TYPE.REGION;
+    const randomSlug = useMemo(() => Math.random().toString().slice(2), []);
+    const labelId = `group-label-${randomSlug}`;
+    const labelTargetId = `labeled-${randomSlug}`;
+    const headingRenderTracker = useRef({
+        hasHeadingRendered: false,
+    });
+    const trackHeadingRendered = () => {
+        headingRenderTracker.current.hasHeadingRendered = true;
+    };
+    useEffect(() => {
+        if (type === GROUP_TYPE.REGION) {
+            setTimeout(() => {
+                if (!headingRenderTracker.current.hasHeadingRendered) {
+                    flagInDevelopment('Every <Group> component of type "region" must render a <Heading> component within it');
+                }
+            }, 500);
+        }
+    }, [flagInDevelopment, type]);
+    const level = Math.min(parentLevel + (type === GROUP_TYPE.REGION ? 1 : 0), 5);
+    const contextValue = {
+        level,
+        type,
+        trackHeadingRendered,
+        labelId,
+        labelTargetId,
+    };
+    const Main = (_jsx(GroupContext.Provider, Object.assign({ value: contextValue }, { children: typeof children === 'function' ? children(contextValue) : children })));
+    if (type === GROUP_TYPE.RAW) {
+        return Main;
+    }
+    return (_jsx("div", Object.assign({ role: GROUP_TYPE_ROLE_MAP[type], "aria-labelledby": labelId, sx: Object.assign({ my: 2 }, sx) }, rest, { children: Main })));
+};

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,10 @@
+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,34 @@
+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";
+import React from 'react';
+import { COLOR, colors } from '../../../theme/colors';
+import { useEnvironment } from '../../providers/env';
+export const Icon = (_a) => {
+    var { icon, size, color, sx, onClick } = _a, rest = __rest(_a, ["icon", "size", "color", "sx", "onClick"]);
+    const InnerComponent = icon;
+    const { flagInDevelopment } = useEnvironment();
+    if (onClick && !rest['aria-label']) {
+        flagInDevelopment('Icon component with onClick should have an aria-label and tabIndex={0}');
+    }
+    return (_jsx("div", Object.assign({ tabIndex: onClick ? 0 : undefined, role: onClick ? 'button' : 'none', sx: Object.assign(Object.assign({}, sx), { fontSize: size, display: 'flex', alignItems: 'center', justifyContent: 'center', ':hover': onClick
+                ? {
+                    cursor: 'pointer',
+                    transform: 'scale(1.05)',
+                }
+                : {} }) }, rest, { children: React.createElement(InnerComponent, {
+            fontSize: 'inherit',
+            style: {
+                color: colors[color || COLOR.PRIMARY],
+            },
+        }) })));
+};

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

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

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, LINK_SIZE } from '.';
+import { Group } from '../Group';
+import { HEADING_SIZE, Heading } from '../text/Heading';
+import { Column } from '../layout/Column';
+const meta = {
+    title: 'Elements/Link',
+    component: Link,
+};
+export default meta;
+const sizes = [
+    { size: LINK_SIZE.LG, label: 'Large' },
+    { size: LINK_SIZE.MD, label: 'Medium' },
+    { 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" }))] }))) })),
+    args: {
+        children: 'Click Me',
+    },
+};

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

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

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+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));
+};
+const CustomExternalLink = (props) => {
+    return _jsx(DefaultLink, Object.assign({ "data-testid": CUSTOM_EXTERNAL_TEST_ID }, props));
+};
+describe('Link', () => {
+    it('renders default external link component without throwing', () => {
+        const { getByRole } = render(_jsx(Link, Object.assign({ to: "https://google.com" }, { children: "Foo" })));
+        expect(getByRole('link')).toBeInTheDocument();
+    });
+    it('renders default internal link component without throwing', () => {
+        const { getByRole } = render(_jsx(Link, Object.assign({ to: "/test/path" }, { children: "Foo" })));
+        expect(getByRole('link')).toBeInTheDocument();
+    });
+    it('renders custom external component if passed', () => {
+        const { getByTestId } = render(_jsx(Link, Object.assign({ to: "https://google.com" }, { children: "Foo" })), {
+            components: {
+                link: {
+                    externalLinkComponent: CustomExternalLink,
+                    internalLinkComponent: CustomInternalLink,
+                },
+            },
+        });
+        expect(getByTestId(CUSTOM_EXTERNAL_TEST_ID)).toBeDefined();
+        expect(() => getByTestId(CUSTOM_INTERNAL_TEST_ID)).toThrow();
+    });
+    it('renders custom internal component if passed', () => {
+        const { getByTestId } = render(_jsx(Link, Object.assign({ to: "/test/route" }, { children: "Foo" })), {
+            components: {
+                link: {
+                    externalLinkComponent: CustomExternalLink,
+                    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" }))] }), {
+            components: {
+                link: {
+                    externalLinkComponent: CustomExternalLink,
+                    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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+type LinkProps = StyledElementProps<HTMLSpanElement, {
+    to: string;
+    target?: string;
+    size?: LINK_SIZE;
+}>;
+export declare enum LINK_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare const Link: React.FC<LinkProps>;
+export {};

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

@@ -0,0 +1,41 @@
+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";
+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";
+    LINK_SIZE["MD"] = "md";
+    LINK_SIZE["LG"] = "lg";
+})(LINK_SIZE || (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,
+};
+export const Link = (_a) => {
+    var { size, to, sx, target } = _a, rest = __rest(_a, ["size", "to", "sx", "target"]);
+    const { link } = useComponentConfig();
+    const typography = SIZE_TYPOGRAPHY_MAP[size || LINK_SIZE.MD];
+    const InternalLink = link.internalLinkComponent;
+    const ExternalLink = link.externalLinkComponent;
+    const isExternal = link.externalMatcher.test(to);
+    const styles = Object.assign(Object.assign({ color: COLOR.ND_BLUE_LIGHT, textDecoration: 'none' }, getTypographyStyles(typography)), sx);
+    if (isExternal) {
+        return _jsx(ExternalLink, Object.assign({ to: to }, rest, { sx: styles, target: target }));
+    }
+    else {
+        return _jsx(InternalLink, Object.assign({ to: to }, rest, { sx: styles, target: target }));
+    }
+};

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

@@ -0,0 +1,10 @@
+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;
+export declare const CustomIconPerItem: Story;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import BookmarkIcon from '@mui/icons-material/Bookmark';
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
+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 '../../..';
+import { FONT_SIZE } from '../../../theme/typography';
+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" }))] })) })),
+};
+export const CustomIconPerItem = {
+    render: () => (_jsx(Row, { children: _jsxs(List, Object.assign({ iconSize: FONT_SIZE.ML }, { children: [_jsx(ListItem, Object.assign({ index: 0, icon: BookmarkIcon, onIconClick: () => { }, iconLabel: "Unfavorite" }, { children: "Favorite 1" })), _jsx(ListItem, Object.assign({ index: 1, icon: BookmarkIcon, onIconClick: () => { }, iconLabel: "Favorite" }, { children: "Favorited 2" })), _jsx(ListItem, Object.assign({ index: 2, icon: BookmarkBorderIcon, onIconClick: () => { }, iconLabel: "Favorite" }, { children: "Not Favorited" }))] })) })),
+};

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,27 @@
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+import { COLOR } from '../../..';
+import { FONT_SIZE } from '../../../theme/typography';
+type ListProps = StyledElementProps<HTMLUListElement, {
+    ordered?: boolean;
+    size?: LIST_SIZE;
+    icon?: React.FC<any>;
+    iconColor?: COLOR;
+    iconSize?: FONT_SIZE;
+}>;
+export declare enum LIST_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare const List: React.FC<ListProps>;
+type ListItemProps = StyledElementProps<HTMLLIElement, {
+    index: number;
+    icon?: React.FC<any>;
+    iconSize?: FONT_SIZE;
+    iconColor?: COLOR;
+    iconLabel?: string;
+    onIconClick?: () => void;
+}>;
+export declare const ListItem: React.FC<ListItemProps>;
+export {};