@ndlib/component-library 0.0.31 → 0.0.33

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

@@ -9,3 +9,5 @@ export declare const Horizontal: Story;
 export declare const DateCards: Story;
 export declare const Clickable: Story;
 export declare const Raised: Story;
+export declare const Heading: Story;
+export declare const CustomImageHeading: Story;

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

@@ -2,9 +2,11 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import AccessTime from '@mui/icons-material/AccessTimeFilled';
 import CalendarIcon from '@mui/icons-material/CalendarMonth';
+import BookmarkIcon from '@mui/icons-material/Bookmark';
 import { CARD_LAYOUT, CARD_SIZE, Card } from '.';
 import { COLOR, Column, LABEL_SIZE, Label, Paragraph, ReadMore, TYPOGRAPHY_TYPE, } from '../../..';
 import { Icon } from '../../elements/Icon';
+import { BUTTON_TYPE, Button } from '../../elements/Button';
 const meta = {
     title: 'Composites/Card',
     component: Card,
@@ -16,21 +18,33 @@ const headlinedCards = [
         headline: 'Exhibit — Printing the Nation: A Century of Irish Book Arts',
         image: 'https://images.ctfassets.net/cfblb1f7i85j/7aCd5Sm86JdtQepGBKDUfy/dcb4d97dd3a1d3ee810e8bcaa82dc715/Spring_Exhibit_2023-Rep.jpg?w=296',
         size: CARD_SIZE.SM,
+        sx: {
+            width: '500px',
+        },
     },
     {
         headline: 'One Book, One Michiana Digital Exhibit — Papers Alight: Contextualizing Mike Curato’s Flamer. Other text to make this longer than the other card.',
         image: 'https://images.ctfassets.net/cfblb1f7i85j/2sGpdDbNkl6MPnlem6wq1R/995c786624613b5ff07228e481996385/One.Book.2023-Rep.png?w=296',
         size: CARD_SIZE.SM,
+        sx: {
+            width: '500px',
+        },
     },
 ];
 const basicCards = [
     {
         children: _jsx(Paragraph, { children: "Basic card 1" }),
         size: CARD_SIZE.SM,
+        sx: {
+            width: '500px',
+        },
     },
     {
         children: _jsx(Paragraph, { children: "Basic card 2" }),
         size: CARD_SIZE.SM,
+        sx: {
+            width: '500px',
+        },
     },
 ];
 const dateCards = [
@@ -93,3 +107,16 @@ export const Raised = {
     render: () => (_jsx(Column, { children: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { raised: true, key: i })))) })),
     args: {},
 };
+export const Heading = {
+    render: () => (_jsx(Column, { children: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, heading: "Heading", headingIcon: BookmarkIcon, headingAction: _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, color: COLOR.WHITE, onClick: () => { } }, { children: "Click Me" })) })))) })),
+    args: {},
+};
+export const CustomImageHeading = {
+    render: () => (_jsx(Column, { children: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, heading: "Heading", headingStyles: {
+                backgroundImage: `url(https://library.nd.edu/static/media/jesus.2.4a2b137e.png)`,
+                backgroundRepeat: 'no-repeat',
+                backgroundPositionX: 'right',
+                backgrounndPositionY: '-15px',
+            } })))) })),
+    args: {},
+};

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

@@ -26,4 +26,12 @@ describe('Card', () => {
         });
         expect(mockClickHandler).toBeCalledTimes(2);
     });
+    it('labels card with headline when passed', () => {
+        const { getByLabelText } = render(_jsx(Card, { headline: MOCK_HEADLINE }));
+        expect(getByLabelText(MOCK_HEADLINE)).toBeDefined();
+    });
+    it('labels card with heading when passed', () => {
+        const { getByLabelText } = render(_jsx(Card, { heading: MOCK_HEADLINE }));
+        expect(getByLabelText(MOCK_HEADLINE)).toBeDefined();
+    });
 });

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

@@ -1,4 +1,4 @@
-import { StyledElementProps } from '../../../theme';
+import { StyledElementProps, StylesProp } from '../../../theme';
 import { COLOR } from '../../../theme/colors';
 import React from 'react';
 export declare enum CARD_LAYOUT {
@@ -17,6 +17,10 @@ type CardState = {
 type CardChildren = React.ReactNode | ((state: CardState) => React.ReactNode);
 export type CardProps = StyledElementProps<HTMLDivElement, {
     headline?: string;
+    heading?: string;
+    headingStyles?: StylesProp;
+    headingIcon?: React.FC;
+    headingAction?: React.ReactNode;
     truncateHeadlineAfter?: number;
     body?: React.ReactNode;
     image?: string;

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heading } from '../../elements/text/Heading';
+import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
 import { ReadMore } from '../../elements/text/ReadMore';
 import { useTheme } from '../../../theme';
 import { GROUP_TYPE, Group } from '../../elements/Group';
 import { Box } from '../../elements/layout/Box';
+import { Icon } from '../../elements/Icon';
 import { Column, FONT, FONT_SIZE, Row, TYPOGRAPHY_TYPE } from '../../..';
 import { COLOR } from '../../../theme/colors';
 import React, { useEffect, useState } from 'react';
@@ -51,10 +52,9 @@ const DateDisplay = ({ date: dateString }) => {
                     mt: 1,
                 } }, { children: MONTH_LABELS[date.getMonth()] }))] })));
 };
-export const Card = ({ size, displayDate, headline, image, layout, onClick, raised, truncateHeadlineAfter, sx, children, }) => {
+export const Card = ({ size, displayDate, headline, image, layout, onClick, raised, truncateHeadlineAfter, heading, headingStyles, headingIcon, headingAction, sx, children, }) => {
     const theme = useTheme();
-    const contentPaddingX = size === CARD_SIZE.SM ? 4 : 5;
-    const bodyTopMargin = size === CARD_SIZE.SM ? 2 : 3;
+    const contentPaddingX = size === CARD_SIZE.SM ? 3 : 4;
     const isVertical = !layout || layout === CARD_LAYOUT.VERTICAL;
     const { isHovered, anchorElementProps } = useHover();
     const [activeBackground, setActiveBackground] = useState(isHovered ? COLOR.ND_SKY_BLUE : COLOR.BACKGROUND);
@@ -65,18 +65,23 @@ export const Card = ({ size, displayDate, headline, image, layout, onClick, rais
     const typography = size === CARD_SIZE.SM
         ? TYPOGRAPHY_TYPE.HEADLINE_SMALL
         : TYPOGRAPHY_TYPE.HEADLINE_MEDIUM;
-    return (_jsxs(Group, Object.assign({}, anchorElementProps, { type: GROUP_TYPE.GROUP, role: onClick ? 'button' : 'group', onClick: onClick, onKeyDown: (e) => {
+    return (_jsxs(Group, Object.assign({}, anchorElementProps, { type: headline || heading ? GROUP_TYPE.REGION : GROUP_TYPE.GROUP, role: onClick ? 'button' : 'group', onClick: onClick, onKeyDown: (e) => {
             if (onClick && e.key === KEY_CODES.ENTER) {
                 onClick();
             }
-        }, tabIndex: onClick ? 0 : undefined, sx: Object.assign({ boxShadow: raised ? theme.boxShadow.EMPHASIZED : undefined, width: isVertical ? '400px' : '100%', height: isVertical ? '350px' : '220px', borderBottom: 'solid 2px', borderColor: COLOR.TRANSPARENT, cursor: onClick ? 'pointer' : undefined, display: 'flex', flexDirection: layout === CARD_LAYOUT.HORIZONTAL ? 'row' : 'column', alignItems: 'flex-start', ':hover,:focus': {
-                transform: 'scale(1.01)',
-                borderColor: COLOR.ND_SKY_BLUE_DARK,
-                backgroundColor: COLOR.ND_SKY_BLUE,
-            } }, sx) }, { children: [image && (_jsx("img", { src: image, style: {
+        }, tabIndex: onClick ? 0 : undefined, sx: Object.assign({ boxShadow: raised || heading ? theme.boxShadow.NORMAL : undefined, width: !isVertical && '100%', borderBottom: 'solid 2px', borderColor: COLOR.TRANSPARENT, cursor: onClick ? 'pointer' : undefined, display: 'flex', flexDirection: layout === CARD_LAYOUT.HORIZONTAL ? 'row' : 'column', alignItems: 'flex-start', ':hover,:focus': onClick
+                ? {
+                    transform: 'scale(1.01)',
+                    borderColor: COLOR.ND_SKY_BLUE_DARK,
+                    backgroundColor: COLOR.ND_SKY_BLUE,
+                }
+                : {} }, sx) }, { children: [image && (_jsx("img", { src: image, style: {
                     width: isVertical ? '100%' : 'auto',
                     height: isVertical ? 'auto' : '100%',
-                } })), displayDate && _jsx(DateDisplay, { date: displayDate }), _jsx(Row, Object.assign({ sx: { px: contentPaddingX, py: contentPaddingY } }, { children: _jsxs(Column, Object.assign({ justify: "center" }, { children: [_jsx(Heading, Object.assign({ typography: typography, sx: { textAlign: 'justify' } }, { children: truncateHeadlineAfter ? (_jsx(ReadMore, Object.assign({ lines: truncateHeadlineAfter, typography: typography, sx: { bg: activeBackground } }, { children: headline }))) : (headline) })), children && (_jsx(Box, Object.assign({ sx: { mt: bodyTopMargin } }, { children: typeof children === 'function'
+                } })), displayDate && _jsx(DateDisplay, { date: displayDate }), heading && (_jsxs(Row, Object.assign({ sx: Object.assign({ bg: COLOR.PRIMARY, color: COLOR.WHITE, width: '100%', px: contentPaddingX, py: 3, justifyContent: 'space-between', alignItems: 'center' }, headingStyles) }, { children: [_jsxs(Row, { children: [headingIcon && (_jsx(Icon, { icon: headingIcon, size: FONT_SIZE.LG, color: COLOR.WHITE, sx: { mr: 2 } })), _jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, sx: {
+                                    color: COLOR.WHITE,
+                                    whiteSpace: 'nowrap',
+                                } }, { children: heading }))] }), _jsx(Row, { children: headingAction && headingAction })] }))), _jsx(Row, Object.assign({ sx: { px: contentPaddingX, py: contentPaddingY } }, { children: _jsxs(Column, Object.assign({ justify: "center" }, { children: [headline && (_jsx(Heading, Object.assign({ typography: typography, sx: { textAlign: 'justify' } }, { children: truncateHeadlineAfter ? (_jsx(ReadMore, Object.assign({ lines: truncateHeadlineAfter, typography: typography, sx: { bg: activeBackground } }, { children: headline }))) : (headline) }))), children && (_jsx(Box, Object.assign({ sx: { mt: headline && !heading ? 2 : 0 } }, { children: typeof children === 'function'
                                 ? children({ isHovered, activeBackground })
                                 : children })))] })) }))] })));
 };

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

@@ -10,13 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import SearchOffIcon from '@mui/icons-material/SearchOff';
+import _SearchOffIcon from '@mui/icons-material/SearchOff';
 import { Row } from '../../elements/layout/Row';
 import { Column } from '../../elements/layout/Column';
 import { PARAGRAPH_SIZE, Paragraph } from '../../elements/text/Paragraph';
 import { COLOR } from '../../../theme/colors';
 import { Icon } from '../../elements/Icon';
 import { FONT_SIZE } from '../../../theme/typography';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+const SearchOffIcon = importedDefaultComponentShim(_SearchOffIcon);
 export const DEFAULT_MESSAGE = 'No results found.';
 export const EmptyState = (_a) => {
     var { icon, message, sx } = _a, rest = __rest(_a, ["icon", "message", "sx"]);

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowLink } from '.';
+import { Column } from '../layout/Column';
+import { Box } from '../layout/Box';
+const meta = {
+    title: 'Elements/ArrowLink',
+    component: ArrowLink,
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(Column, { children: _jsx(Box, { children: _jsx(ArrowLink, Object.assign({ to: "/" }, { children: "Click Me" })) }) })),
+};

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

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

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { ArrowLink } 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('ArrowLink', () => {
+    it('renders default external link component without throwing', () => {
+        const { getByRole } = render(_jsx(ArrowLink, Object.assign({ to: "https://google.com" }, { children: "Foo" })));
+        expect(getByRole('link')).toBeInTheDocument();
+    });
+    it('renders default internal link component without throwing', () => {
+        const { getByRole } = render(_jsx(ArrowLink, Object.assign({ to: "/test/path" }, { children: "Foo" })));
+        expect(getByRole('link')).toBeInTheDocument();
+    });
+    it('passes styles to custom component', () => {
+        const { getByTestId } = render(_jsxs(_Fragment, { children: [_jsx(ArrowLink, Object.assign({ to: "https://google.com", sx: { mt: 1 } }, { children: "Foo" })), _jsx(ArrowLink, 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/ArrowLink/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/** @jsxImportSource theme-ui */
+import { StyledElementProps } from '../../../theme';
+type ArrowLinkProps = StyledElementProps<HTMLLinkElement, {
+    to: string;
+}>;
+export declare const ArrowLink: React.FC<ArrowLinkProps>;
+export {};

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

@@ -0,0 +1,39 @@
+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 { COLOR } from '../../../theme/colors';
+import { Link } from '../Link';
+export const ArrowLink = (_a) => {
+    var { to, children, sx } = _a, rest = __rest(_a, ["to", "children", "sx"]);
+    return (_jsxs(Link, Object.assign({ to: to }, rest, { sx: Object.assign({ display: 'inline-flex', whiteSpace: 'nowrap', padding: 0, flexGrow: 0, position: 'relative', boxSizing: 'border-box', bg: COLOR.WHITE, color: COLOR.PRIMARY, ':hover': {
+                transform: 'scale(1.02)',
+                bg: COLOR.EXTRA_EXTRA_LIGHT_GRAY,
+            }, ':hover>svg': {
+                fill: COLOR.EXTRA_EXTRA_LIGHT_GRAY,
+            }, '>svg': {
+                fill: COLOR.WHITE,
+            } }, sx) }, { children: [_jsx("div", Object.assign({ sx: {
+                    position: 'relative',
+                    border: '1px solid #a7a7a7',
+                    'border-width': '1px 0 2px 1px',
+                    boxSizing: 'border-box',
+                    padding: '0.125rem 1.5rem 0.125rem 0.5rem',
+                    height: '100%',
+                    flex: '1 1 auto',
+                } }, { children: children })), _jsxs("svg", Object.assign({ viewBox: "0 0 16 1", preserveAspectRatio: "none", sx: {
+                    width: '16px',
+                    right: '-16px',
+                    top: '0px',
+                    position: 'absolute',
+                    height: '100%',
+                } }, { children: [_jsx("path", { d: "M0,0 0,0 16,0.5 0,1 0,1z" }), _jsx("line", { x1: "0", x2: "16", y1: "0", y2: "0.5", stroke: "#a7a7a7", strokeWidth: "0.05", strokeLinecap: "butt" }), _jsx("line", { x1: "0", x2: "16", y1: "1", y2: "0.5", stroke: "#a7a7a7", strokeWidth: "0.1", strokeLinecap: "butt" })] }))] })));
+};

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

@@ -28,7 +28,7 @@ type ButtonProps = StyledElementProps<HTMLButtonElement, {
 export declare const Button: React.ForwardRefExoticComponent<{
     sx?: import("../../../theme").StylesProp | undefined;
     children?: React.ReactNode;
-} & Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> & {
+} & Omit<React.HTMLAttributes<HTMLButtonElement>, "children" | "onChange"> & {
     size?: BUTTON_SIZE | undefined;
     type?: BUTTON_TYPE | undefined;
     color?: COLOR | undefined;

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

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

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AutoComplete } from '.';
+import { Paragraph, PARAGRAPH_SIZE } from '../../text/Paragraph';
+import { HEADING_SIZE, Heading } from '../../text/Heading';
+import { Column } from '../../layout/Column';
+import { Row } from '../../layout/Row';
+const options = [
+    {
+        label: 'Cucumber',
+        value: 'Cucumber',
+    },
+    {
+        label: 'Egg Plant',
+        value: 'Egg Plant',
+    },
+    {
+        label: 'Napa',
+        value: 'Napa',
+    },
+    {
+        label: 'Cabbage',
+        value: 'Cabbage',
+    },
+    {
+        label: 'Broccoli',
+        value: 'Broccoli',
+    },
+    {
+        label: 'Radish',
+        value: 'Radish',
+    },
+    {
+        label: 'Cauliflower',
+        value: 'Cauliflower',
+    },
+    {
+        label: 'Beet',
+        value: 'Beet',
+    },
+    {
+        label: 'Tomato',
+        value: 'Tomato',
+    },
+    {
+        label: 'Zuchinni',
+        value: 'Zuchinni',
+    },
+];
+function onSelect() {
+    return console.log('clicked');
+}
+const meta = {
+    title: 'Elements/Fields/AutoComplete',
+    component: AutoComplete,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(_Fragment, { children: _jsx(Row, Object.assign({ justify: "space-between" }, { children: _jsxs(Column, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, { children: "Vegetables" })), _jsx("br", {}), _jsx(AutoComplete, { options: options, value: "cucumber", onSelect: onSelect }), _jsx("br", {}), _jsx(Paragraph, Object.assign({ size: PARAGRAPH_SIZE.LG }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices venenatis purus at porta. Etiam congue sapien leo, sed malesuada justo commodo in. Nunc consequat, massa non cursus posuere, magna eros lacinia lectus, eget lobortis mi erat ut justo. Maecenas nisi mi, mollis sed ornare vitae, pharetra sed augue. Curabitur mollis orci risus, sed imperdiet nisi aliquet et. Ut non elit nec magna rhoncus maximus sit amet ut dui. Mauris sit amet eleifend lectus. Aliquam consectetur posuere libero eu ultricies. Etiam rutrum non orci nec vulputate. Sed vel accumsan diam. Cras aliquet eros eros, sit amet pharetra eros tincidunt ut. Vestibulum est erat, eleifend dapibus eros vel, elementum vehicula risus. Etiam blandit condimentum sodales. Donec non libero in orci aliquam egestas fringilla eget purus. Suspendisse pellentesque at ligula ut accumsan." }))] }) })) })),
+};

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

@@ -0,0 +1,11 @@
+interface Option {
+    label: string;
+    value: string;
+}
+interface AutoCompleteProps {
+    value: string;
+    options: Option[];
+    onSelect: (option: string) => any;
+}
+export declare const AutoComplete: ({ value, options, onSelect, }: AutoCompleteProps) => import("react/jsx-runtime").JSX.Element;
+export default AutoComplete;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { COLOR } from '../../../../theme/colors';
+import { ListBox } from '../../ListBox';
+import { TextInput } from '../../Fields/TextInput';
+export const AutoComplete = ({ value, options, onSelect, }) => {
+    const [inputValue, setInputValue] = useState(value);
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [showOptions, setShowOptions] = useState(false);
+    const handleChange = (value) => {
+        setInputValue(value);
+        const newFilteredOptions = options.filter((option) => option.label.toLowerCase().includes(value.toLowerCase()));
+        setFilteredOptions(newFilteredOptions);
+        setShowOptions(true);
+    };
+    const handleSelect = (selectedOption) => {
+        setShowOptions(false);
+        setInputValue(selectedOption.label);
+        onSelect(selectedOption.value);
+    };
+    return (_jsxs("div", { children: [_jsx(TextInput, { value: inputValue, onChange: handleChange }), showOptions && (_jsx(ListBox, { options: filteredOptions, selectOption: handleSelect, sx: {
+                    bg: COLOR.PRIMARY,
+                    marginTop: 2,
+                } }))] }));
+};
+export default AutoComplete;

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

@@ -130,8 +130,8 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, onSelect
                         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);
+                    } }, typographyStyles), sx), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
+                    onSelectOption && onSelectOption(option.value);
                     close();
                 }, ref: refs.setFloating, renderOption: renderOption, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { zIndex: 1 }) }))] }));
 }

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

@@ -17,7 +17,7 @@ export type TextInputProps = StyledElementProps<HTMLInputElement, {
 export declare const TextInput: React.ForwardRefExoticComponent<{
     sx?: import("../../../../theme").StylesProp | undefined;
     children?: string | undefined;
-} & Omit<React.HTMLAttributes<HTMLInputElement>, "children"> & {
+} & Omit<React.HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & {
     size?: INPUT_SIZE | undefined;
     leftIcon?: React.FC<any> | undefined;
     inline?: boolean | undefined;

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

@@ -7,7 +7,7 @@ type ListBoxProps<Value extends Key, Option extends BasicOption<Value>> = Styled
     renderOption?: RenderOption<Value, Option>;
     selected?: Value;
     focused?: Value;
-    selectOption?: (value: Value) => void;
+    selectOption?: (option: Option) => void;
     onDownPress?: () => void;
     onUpPress?: () => void;
     onSelect?: () => void;
@@ -16,12 +16,12 @@ type ListBoxProps<Value extends Key, Option extends BasicOption<Value>> = Styled
 export declare const ListBox: <Value extends React.Key = string, Option extends BasicOption<Value> = any>(props: {
     sx?: import("../../../theme").StylesProp | undefined;
     children?: React.ReactNode;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
     options: Option[];
     renderOption?: RenderOption<Value, Option> | undefined;
     selected?: Value | undefined;
     focused?: Value | undefined;
-    selectOption?: ((value: Value) => void) | undefined;
+    selectOption?: ((option: Option) => void) | undefined;
     onDownPress?: (() => void) | undefined;
     onUpPress?: (() => void) | undefined;
     onSelect?: (() => void) | undefined;

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

@@ -21,7 +21,7 @@ function ListBoxInner(_a, ref) {
     const typography = getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM);
     return (_jsx("div", Object.assign({ role: "listbox", ref: ref, sx: Object.assign(Object.assign({ border: 'solid 1px', borderRadius: '4px', borderColor: COLOR.LIGHT_GRAY, backgroundColor: COLOR.BACKGROUND, boxShadow: '0px 0px 8px 2px #dddddd' }, typography), sx), onKeyDown: (e) => {
             console.log(e);
-        } }, rest, { children: options.map((option) => (_jsx("div", Object.assign({ id: getOptionId(option.value), "aria-selected": selected === option.value, role: "option", onClick: option.onClick, onMouseDown: () => selectOption && selectOption(option.value), sx: {
+        } }, rest, { children: options.map((option) => (_jsx("div", Object.assign({ id: getOptionId(option.value), "aria-selected": selected === option.value, role: "option", onClick: option.onClick, onMouseDown: () => selectOption && selectOption(option), sx: {
                 px: 4,
                 py: 3,
                 backgroundColor: focused === option.value

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

@@ -12,7 +12,7 @@ export declare enum PILL_TYPE {
 export declare const Pill: React.ForwardRefExoticComponent<{
     sx?: import("../../../theme").StylesProp | undefined;
     children?: React.ReactNode;
-} & Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> & {
+} & Omit<React.HTMLAttributes<HTMLButtonElement>, "children" | "onChange"> & {
     size?: PILL_SIZE | undefined;
     type?: PILL_TYPE | undefined;
     color?: COLOR | undefined;

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { COLOR } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
 export { GlobalStyles } from './theme/GlobalStyles';
 export { Alert, Alerts } from './components/elements/Alerts';
+export { ArrowLink } from './components/elements/ArrowLink';
 export { BrandingBar } from './components/elements/BrandingBar';
 export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elements/Button';
 export { Heading, HEADING_SIZE } from './components/elements/text/Heading';

package/dist/index.js

@@ -3,6 +3,7 @@ export { COLOR } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
 export { GlobalStyles } from './theme/GlobalStyles';
 export { Alert, Alerts } from './components/elements/Alerts';
+export { ArrowLink } from './components/elements/ArrowLink';
 export { BrandingBar } from './components/elements/BrandingBar';
 export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elements/Button';
 export { Heading, HEADING_SIZE } from './components/elements/text/Heading';

package/dist/theme/colors.d.ts

@@ -1,5 +1,6 @@
 export declare enum COLOR {
     TEXT = "text",
+    LIGHT_TEXT = "lightText",
     BACKGROUND = "background",
     TRANSPARENT = "transparent",
     PRIMARY = "primary",

package/dist/theme/colors.js

@@ -1,6 +1,7 @@
 export var COLOR;
 (function (COLOR) {
     COLOR["TEXT"] = "text";
+    COLOR["LIGHT_TEXT"] = "lightText";
     COLOR["BACKGROUND"] = "background";
     COLOR["TRANSPARENT"] = "transparent";
     COLOR["PRIMARY"] = "primary";
@@ -48,6 +49,7 @@ export var COLOR;
 })(COLOR || (COLOR = {}));
 export const colors = {
     [COLOR.TEXT]: '#333333',
+    [COLOR.LIGHT_TEXT]: '#767676',
     [COLOR.BACKGROUND]: '#ffffff',
     [COLOR.TRANSPARENT]: 'rgba(0,0,0,0)',
     [COLOR.PRIMARY]: '#0c2340',
@@ -59,7 +61,7 @@ export const colors = {
     [COLOR.WHITE]: '#ffffff',
     [COLOR.BLACK]: '#000000',
     [COLOR.DARK_GRAY]: '#333333',
-    [COLOR.GRAY]: '#555555',
+    [COLOR.GRAY]: '#767676',
     [COLOR.LIGHT_GRAY]: '#d2d2d2',
     [COLOR.EXTRA_LIGHT_GRAY]: '#e2e2e2',
     [COLOR.EXTRA_EXTRA_LIGHT_GRAY]: '#f2f2f2',

package/dist/theme/index.d.ts

@@ -8,6 +8,7 @@ export declare const SPACING: string[];
 export declare const theme: {
     colors: {
         text: string;
+        lightText: string;
         background: string;
         transparent: string;
         primary: string;
@@ -96,10 +97,11 @@ export type StylesProp = ThemeUICSSObject & {
 export type StyledElementProps<E extends Element, CustomProps = object, Children = React.ReactNode> = {
     sx?: StylesProp;
     children?: Children;
-} & Omit<React.HTMLAttributes<E>, 'children'> & CustomProps;
+} & Omit<React.HTMLAttributes<E>, 'children' | 'onChange'> & CustomProps;
 export declare const useTheme: () => {
     colors: {
         text: string;
+        lightText: string;
         background: string;
         transparent: string;
         primary: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "type": "module",
   "sideEffects": false,
   "files": [