@ndlib/component-library 0.0.17 → 0.0.19

package/dist/components/composites/NavMenu/NavMenu.stories.d.ts

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

package/dist/components/composites/NavMenu/NavMenu.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavMenu } from './';
+import { DemoMenuImplementation } from './demo';
+const meta = {
+    title: 'Composites/NavMenu',
+    component: NavMenu,
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(DemoMenuImplementation, {}),
+    args: {},
+};

package/dist/components/composites/NavMenu/NavMenu.test.d.ts

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

package/dist/components/composites/NavMenu/NavMenu.test.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent } from '@testing-library/react';
+import { render } from '../../../utils/test';
+import { KEY_CODES } from '../../../utils/misc';
+import { DemoMenuImplementation } from './demo';
+describe('NavMenu', () => {
+    it('can be navigated with events', () => {
+        const { getByRole } = render(_jsx(DemoMenuImplementation, {}));
+        const menu = getByRole('menu');
+        const firstMenuItem = getByRole('menuitem', {
+            name: 'test menu 1',
+        });
+        const secondMenuItem = getByRole('menuitem', {
+            name: 'test menu 2',
+        });
+        fireEvent.focus(menu);
+        expect(firstMenuItem).toHaveFocus();
+        fireEvent.keyDown(firstMenuItem, {
+            key: KEY_CODES.ARROW_RIGHT,
+        });
+        expect(secondMenuItem).toHaveFocus();
+        const firstSubmenuItem = getByRole('menuitem', {
+            name: 'test submenu 1',
+        });
+        const secondSubmenuItem = getByRole('menuitem', {
+            name: 'test submenu 2',
+        });
+        const firstLeaf = getByRole('menuitem', {
+            name: 'test leaf 1',
+        });
+        const secondLeaf = getByRole('menuitem', {
+            name: 'test leaf 2',
+        });
+        fireEvent.keyDown(secondMenuItem, {
+            key: KEY_CODES.ARROW_DOWN,
+        });
+        expect(firstSubmenuItem).toHaveFocus();
+        fireEvent.keyDown(firstMenuItem, {
+            key: KEY_CODES.ARROW_RIGHT,
+        });
+        expect(secondSubmenuItem).toHaveFocus();
+        fireEvent.keyDown(secondMenuItem, {
+            key: KEY_CODES.ARROW_LEFT,
+        });
+        expect(firstSubmenuItem).toHaveFocus();
+        fireEvent.keyDown(secondMenuItem, {
+            key: KEY_CODES.ENTER,
+        });
+        expect(firstLeaf).toHaveFocus();
+        fireEvent.keyDown(firstLeaf, {
+            key: KEY_CODES.ARROW_DOWN,
+        });
+        expect(secondLeaf).toHaveFocus();
+        fireEvent.keyDown(secondLeaf, {
+            key: KEY_CODES.ARROW_UP,
+        });
+        expect(firstLeaf).toHaveFocus();
+        fireEvent.keyDown(firstLeaf, {
+            key: KEY_CODES.ARROW_UP,
+        });
+        expect(firstSubmenuItem).toHaveFocus();
+        fireEvent.keyDown(firstSubmenuItem, {
+            key: KEY_CODES.ARROW_UP,
+        });
+        expect(secondMenuItem).toHaveFocus();
+    });
+    it('can be navigated with keyboard events', () => {
+        const { getByRole } = render(_jsx(DemoMenuImplementation, {}));
+        const secondMenuItem = getByRole('menuitem', {
+            name: 'test menu 2',
+        });
+        fireEvent.mouseDown(secondMenuItem);
+        fireEvent.click(secondMenuItem);
+        fireEvent.mouseUp(secondMenuItem);
+        getByRole('menuitem', {
+            name: 'test submenu 1',
+        });
+        getByRole('menuitem', {
+            name: 'test submenu 2',
+        });
+        getByRole('menuitem', {
+            name: 'test leaf 1',
+        });
+        getByRole('menuitem', {
+            name: 'test leaf 2',
+        });
+        fireEvent.mouseDown(secondMenuItem);
+        fireEvent.click(secondMenuItem);
+        fireEvent.mouseUp(secondMenuItem);
+        expect(() => {
+            getByRole('menuitem', {
+                name: 'test submenu 1',
+            });
+        }).toThrow();
+    });
+});

package/dist/components/composites/NavMenu/demo.d.ts

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

package/dist/components/composites/NavMenu/demo.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { NavMenu } from '.';
+import { Button } from '../../elements/Button';
+import { Row } from '../../elements/layout/Row';
+import { MENU_ACTION_TYPE, MENU_ORIENTATION, MenuProvider, } from '../../providers/menu';
+const demoMenu = {
+    orientation: MENU_ORIENTATION.HORIZONTAL,
+    items: [
+        {
+            id: 'test-menu-1',
+            label: 'test menu 1',
+            action: {
+                type: MENU_ACTION_TYPE.LINK,
+                to: '/',
+            },
+        },
+        {
+            id: 'test-menu-2',
+            label: 'test menu 2',
+            action: {
+                type: MENU_ACTION_TYPE.SUBMENU,
+                submenu: {
+                    orientation: MENU_ORIENTATION.HORIZONTAL,
+                    items: [
+                        {
+                            label: 'test submenu 1',
+                            id: 'test-submenu-1',
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 1',
+                                            id: 'test-leaf-1',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 2',
+                                            id: 'test-leaf-2',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                        },
+                        {
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 3',
+                                            id: 'test-leaf-3',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 4',
+                                            id: 'test-leaf-4',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                            label: 'test submenu 2',
+                            id: 'test-submenu-2',
+                        },
+                    ],
+                },
+            },
+        },
+    ],
+};
+// This is needed because NavMenu doesn't control rendering of top-level menu items
+export const DemoMenuImplementation = () => (_jsx(MenuProvider, Object.assign({ menu: demoMenu }, { children: ({ menu, getMenuProps, getMenuItemProps }) => (_jsxs(_Fragment, { children: [_jsx(Row, Object.assign({}, getMenuProps(), { children: menu.items.map((menuItem) => (_createElement(Button, Object.assign({}, getMenuItemProps([menuItem.id]), { sx: { m: 1 }, key: menuItem.id }), menuItem.label))) })), _jsx(NavMenu, {})] })) })));

package/dist/components/composites/NavMenu/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+type NavMenuProps = StyledElementProps<HTMLDivElement>;
+export declare const NavMenu: React.FC<NavMenuProps>;
+export {};

package/dist/components/composites/NavMenu/index.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { List, ListItem } from '../../elements/List';
+import { MENU_ACTION_TYPE, useMenu } from '../../providers/menu';
+import { Row } from '../../elements/layout/Row';
+import { Column } from '../../elements/layout/Column';
+import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
+import { Link } from '../../elements/Link';
+import { LINE_HEIGHT } from '../../../theme/typography';
+import { COLOR } from '../../../theme/colors';
+export const NavMenu = (props) => {
+    const { isOpen, activePath, getMenuItem, getMenuItemProps, getMenuProps } = useMenu();
+    if (!isOpen) {
+        return null;
+    }
+    const topLevelMenuId = activePath[0];
+    const activeTopLevelMenu = getMenuItem([topLevelMenuId]);
+    if (!activeTopLevelMenu ||
+        !(activeTopLevelMenu.action.type === MENU_ACTION_TYPE.SUBMENU)) {
+        return null;
+    }
+    const submenu = activeTopLevelMenu.action.submenu;
+    return (_jsxs(Row, Object.assign({}, props, { sx: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            p: 3,
+            border: 'solid 1px',
+            borderColor: COLOR.FAINT_GRAY,
+            borderRadius: '4px',
+        } }, { children: [_jsx(Column, { sx: { flexGrow: 1 } }), submenu.items.map((submenuItem) => {
+                if (!(submenuItem.action.type === MENU_ACTION_TYPE.SUBMENU)) {
+                    return null;
+                }
+                const leafMenuItems = submenuItem.action.submenu.items;
+                const submenuPath = [topLevelMenuId, submenuItem.id];
+                return (_jsxs(Column, Object.assign({ sx: { flexBasis: '275px', p: 2, flexShrink: 0, flexGrow: 0 } }, { children: [_jsx(Heading, Object.assign({ standalone: true, size: HEADING_SIZE.SM, underline: true }, getMenuItemProps(submenuPath), { children: submenuItem.label })), _jsx(List, Object.assign({}, getMenuProps(submenuPath), { icon: ChevronRightIcon }, { children: leafMenuItems.map((leafMenuItem, i) => {
+                                const leafMenuPath = submenuPath.concat(leafMenuItem.id);
+                                return (_jsx(ListItem, Object.assign({ index: i, sx: { mt: 1 } }, getMenuItemProps(leafMenuPath), { children: _jsx(Link, Object.assign({ to: "/", sx: { lineHeight: LINE_HEIGHT.CONDENSED } }, { children: leafMenuItem.label })) }), leafMenuItem.id));
+                            }) }))] }), submenuItem.id));
+            }), _jsx(Column, { sx: { flexGrow: 1 } })] })));
+};

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

@@ -137,7 +137,7 @@ export const Button = React.forwardRef((_a, ref) => {
                 justifyContent: 'center',
             } }, { children: [_jsx(Spinner, { size: SPINNER_SIZE.SM, color: textColor, sx: { position: 'absolute' } }), _jsx("div", Object.assign({ sx: { visibility: 'hidden' } }, { children: body }))] })));
     }
-    return (_jsxs("button", Object.assign({ ref: ref, disabled: disabled, onMouseEnter: () => {
+    return (_jsxs("button", Object.assign({ ref: ref, tabIndex: disabled ? -1 : 0, disabled: disabled, onMouseEnter: () => {
             setHover(true);
         }, onMouseLeave: () => {
             setHover(false);
@@ -149,6 +149,15 @@ export const Button = React.forwardRef((_a, ref) => {
                     transform: hoverTransform,
                     textDecoration: hoverDecoration,
                 }
+                : undefined, ':focus': !disabled
+                ? {
+                    bg: hoverBg,
+                    color: hoverTextColor,
+                    boxShadow: hoverShadow,
+                    cursor: 'pointer',
+                    transform: hoverTransform,
+                    textDecoration: hoverDecoration,
+                }
                 : undefined }, typographyStyles), sx) }, rest, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: hover ? hoverTextColor : textColor })), _jsx("div", Object.assign({ css: {
                     flexGrow: 1,
                     justifyContent: 'flex-start',

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DatePicker } from '.';
+import { Box } from '../../layout/Box';
+const meta = {
+    title: 'Elements/Fields/DatePicker',
+    component: DatePicker,
+    tags: ['autodocs'],
+};
+export default meta;
+const StatefulDatePicker = (props) => {
+    const [date, setDate] = useState(new Date());
+    return _jsx(DatePicker, Object.assign({}, props, { value: date, onChange: setDate }));
+};
+export const Default = {
+    render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { placeholder: "test" }) }))),
+};
+export const Inline = {
+    render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { inline: true }) }))),
+};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import 'react-datepicker/dist/react-datepicker.css';
+import { TextInputProps } from '../TextInput';
+import { BoxProps } from '../../layout/Box';
+export declare const InputWrapper: React.ForwardRefExoticComponent<{
+    onChange?: ((e: React.ChangeEvent) => void) | undefined;
+    onClick?: ((e: React.MouseEvent) => void) | undefined;
+    value?: string | undefined;
+    children: React.ReactElement;
+} & React.RefAttributes<any>>;
+export declare const DatePicker: React.FC<{
+    value: Date;
+    onChange: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    inline?: boolean;
+    wrapperProps?: BoxProps;
+    inputProps?: Partial<TextInputProps>;
+}>;

package/dist/components/elements/Fields/DatePicker/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 "react/jsx-runtime";
+import React from 'react';
+import ReactDatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import { TextInput } from '../TextInput';
+import CalendarIcon from '@mui/icons-material/CalendarMonth';
+import { Box } from '../../layout/Box';
+// Need to do this to allow passing props to TextInput
+// react-datepicker will overwrite all props passed to customInput
+export const InputWrapper = React.forwardRef(({ onChange, value, children, onClick }, ref) => {
+    return React.cloneElement(children, {
+        value: value,
+        onChangeRaw: onChange,
+        ref: ref,
+        leftIcon: CalendarIcon,
+        onClick,
+    });
+});
+const PermissiveTextInput = TextInput;
+export const DatePicker = (_a) => {
+    var { value, wrapperProps, inputProps } = _a, rest = __rest(_a, ["value", "wrapperProps", "inputProps"]);
+    return (_jsx(Box, Object.assign({}, wrapperProps, { children: _jsx(ReactDatePicker, Object.assign({ calendarClassName: "ndlib-date-picker", selected: value, customInput: _jsx(InputWrapper, { children: _jsx(PermissiveTextInput, Object.assign({}, inputProps)) }) }, rest)) })));
+};

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MonthPicker } from '.';
+import { Box } from '../../layout/Box';
+const meta = {
+    title: 'Elements/Fields/MonthPicker',
+    component: MonthPicker,
+    tags: ['autodocs'],
+};
+export default meta;
+const StatefulMonthPicker = (props) => {
+    const [date, setDate] = useState(new Date());
+    return _jsx(MonthPicker, Object.assign({}, props, { value: date, onChange: setDate }));
+};
+export const Default = {
+    render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulMonthPicker, {}) }))),
+};
+export const Inline = {
+    render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulMonthPicker, { inline: true }) }))),
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import 'react-datepicker/dist/react-datepicker.css';
+import { TextInputProps } from '../TextInput';
+import { BoxProps } from '../../layout/Box';
+export declare const MonthPicker: React.FC<{
+    value: Date;
+    onChange: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    inline?: boolean;
+    inputProps?: Partial<TextInputProps>;
+    wrapperProps?: BoxProps;
+}>;

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

@@ -0,0 +1,22 @@
+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 "react/jsx-runtime";
+import ReactDatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import { TextInput } from '../TextInput';
+import { InputWrapper } from '../DatePicker';
+import { Box } from '../../layout/Box';
+const PermissiveTextInput = TextInput;
+export const MonthPicker = (_a) => {
+    var { value, inputProps, wrapperProps } = _a, rest = __rest(_a, ["value", "inputProps", "wrapperProps"]);
+    return (_jsx(Box, Object.assign({}, wrapperProps, { children: _jsx(ReactDatePicker, Object.assign({ calendarClassName: "ndlib-date-picker", selected: value, customInput: _jsx(InputWrapper, { children: _jsx(PermissiveTextInput, Object.assign({}, inputProps)) }), showMonthYearPicker: true }, rest)) })));
+};

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

@@ -4,13 +4,13 @@ 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';
+import { COLOR } from '../../../../theme/colors';
 const typographyMap = {
     [INPUT_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
     [INPUT_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,

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

@@ -18,7 +18,7 @@ const sizes = [
 ];
 const StatefulInput = (props) => {
     const [value, setValue] = useState('');
-    return _jsx(TextInput, Object.assign({ value: value, onChange: setValue }, props));
+    return (_jsx(TextInput, Object.assign({ value: value, onChange: setValue, placeholder: "test" }, 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

@@ -6,12 +6,22 @@ export declare enum INPUT_SIZE {
     MD = "md",
     LG = "lg"
 }
-type TextInputProps = StyledElementProps<HTMLInputElement, {
+export type TextInputProps = StyledElementProps<HTMLInputElement, {
     size?: INPUT_SIZE;
     leftIcon?: React.FC<any>;
     inline?: boolean;
     value: string;
-    onChange: (value: string) => void;
+    onChange?: (value: string) => void;
+    onChangeRaw?: (e: string | React.ChangeEvent) => void;
 }, string>;
-export declare const TextInput: React.FC<TextInputProps>;
-export {};
+export declare const TextInput: React.ForwardRefExoticComponent<{
+    sx?: import("../../../../theme").StylesProp | undefined;
+    children?: string | undefined;
+} & React.HTMLAttributes<HTMLInputElement> & {
+    size?: INPUT_SIZE | undefined;
+    leftIcon?: React.FC<any> | undefined;
+    inline?: boolean | undefined;
+    value: string;
+    onChange?: ((value: string) => void) | undefined;
+    onChangeRaw?: ((e: string | React.ChangeEvent) => void) | undefined;
+} & React.RefAttributes<any>>;

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

@@ -10,10 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+/** @jsxImportSource theme-ui */
+import React from 'react';
 import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../../theme/typography';
 import { useTheme } from '../../../../theme';
-import { COLOR } from '../../../..';
 import { Icon } from '../../Icon';
+import { COLOR } from '../../../../theme/colors';
 export var INPUT_SIZE;
 (function (INPUT_SIZE) {
     INPUT_SIZE["SM"] = "sm";
@@ -35,8 +37,8 @@ const defaultHeight = {
     [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"]);
+export const TextInput = React.forwardRef((_a, ref) => {
+    var { value, onChange, onChangeRaw, onClick, inline, size: sizeParam, leftIcon, sx } = _a, rest = __rest(_a, ["value", "onChange", "onChangeRaw", "onClick", "inline", "size", "leftIcon", "sx"]);
     const theme = useTheme();
     const size = sizeParam || INPUT_SIZE.MD;
     const display = inline === false ? 'flex' : 'inline-flex';
@@ -44,7 +46,7 @@ export const TextInput = (_a) => {
     const height = defaultHeight[size];
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
-    return (_jsxs("div", Object.assign({ sx: Object.assign(Object.assign({ height,
+    return (_jsxs("div", Object.assign({ ref: ref, onClick: onClick, 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': {
@@ -53,8 +55,9 @@ export const TextInput = (_a) => {
                     mr: 2,
                     fontSize: getIconSize(typographyStyles.fontSize),
                 } })), _jsx("input", Object.assign({ value: value, onChange: (event) => {
-                    onChange(event.target.value);
+                    onChange && onChange(event.target.value);
+                    onChangeRaw && onChangeRaw(event);
                 }, sx: Object.assign(Object.assign({ px: 0, py: 0, border: 'none' }, typographyStyles), { ':focus': {
                         outline: 'none',
                     } }) }, rest))] })));
-};
+});

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

@@ -31,7 +31,7 @@ export const Link = (_a) => {
     const InternalLink = link.internalLinkComponent;
     const ExternalLink = link.externalLinkComponent;
     const isExternal = link.externalMatcher.test(to);
-    const styles = Object.assign(Object.assign({ color: COLOR.PRIMARY }, getTypographyStyles(typography)), sx);
+    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 }));
     }

package/dist/components/elements/layout/Box.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 /** @jsxImportSource theme-ui */
 import { StyledElementProps } from '../../../theme';
-type BoxProps = StyledElementProps<HTMLDivElement>;
+export type BoxProps = StyledElementProps<HTMLDivElement>;
 export declare const Box: React.FC<BoxProps>;
-export {};

package/dist/components/providers/menu.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+export declare enum MENU_ACTION_TYPE {
+    SUBMENU = "SUBMENU",
+    LINK = "LINK"
+}
+export declare enum MENU_ORIENTATION {
+    HORIZONTAL = "HORIZONTAL",
+    VERTICAL = "VERTICAL"
+}
+type SubmenuAction = {
+    type: MENU_ACTION_TYPE.SUBMENU;
+    submenu: Menu;
+};
+type LinkAction = {
+    type: MENU_ACTION_TYPE.LINK;
+    to: string;
+};
+type Action = SubmenuAction | LinkAction;
+type MenuItem = {
+    id: string;
+    label: string;
+    action: Action;
+};
+export type Menu = {
+    orientation: MENU_ORIENTATION;
+    items: MenuItem[];
+};
+type Path = string[];
+type HtmlAttributes = Omit<React.HTMLAttributes<any>, 'color'>;
+type MenuContextType = {
+    menu: Menu;
+    activePath: Path;
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    getMenuItem: (path: Path) => MenuItem | undefined;
+    getMenuItemProps: (path: Path) => HtmlAttributes;
+    getMenuProps: (path?: Path) => HtmlAttributes;
+};
+type MenuProviderProps = {
+    menu: Menu;
+    children: React.ReactNode | ((context: MenuContextType) => React.ReactNode);
+};
+export declare const useMenu: () => MenuContextType;
+export declare const MenuProvider: React.FC<MenuProviderProps>;
+export {};