@ndlib/component-library 0.0.30 → 0.0.32

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

@@ -20,5 +20,5 @@ import { FONT_SIZE } from '../../../theme/typography';
 export const DEFAULT_MESSAGE = 'No results found.';
 export const EmptyState = (_a) => {
     var { icon, message, sx } = _a, rest = __rest(_a, ["icon", "message", "sx"]);
-    return (_jsxs(Column, Object.assign({ sx: Object.assign(Object.assign({}, sx), { width: '100%', alignItems: 'center', justifyContent: 'center', mt: 5 }) }, rest, { children: [_jsx(Row, { children: _jsx(Icon, { icon: icon || SearchOffIcon, size: FONT_SIZE.XL, color: COLOR.LIGHT_GRAY }) }), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Paragraph, Object.assign({ sx: { color: COLOR.LIGHT_GRAY }, size: PARAGRAPH_SIZE.LG }, { children: message || DEFAULT_MESSAGE })) }))] })));
+    return (_jsxs(Column, Object.assign({ sx: Object.assign(Object.assign({}, sx), { width: '100%', alignItems: 'center', justifyContent: 'center', mt: 5 }) }, rest, { children: [_jsx(Row, { children: _jsx(Icon, { icon: icon || SearchOffIcon, size: FONT_SIZE.XL, color: COLOR.GRAY }) }), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Paragraph, Object.assign({ sx: { color: COLOR.GRAY }, size: PARAGRAPH_SIZE.LG }, { children: message || DEFAULT_MESSAGE })) }))] })));
 };

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

@@ -28,7 +28,7 @@ export const NavMenu = (props) => {
             justifyContent: 'center',
             p: 3,
             border: 'solid 1px',
-            borderColor: COLOR.FAINT_GRAY,
+            borderColor: COLOR.EXTRA_LIGHT_GRAY,
             borderRadius: '4px',
         } }, { children: [_jsx(Column, { sx: { flexGrow: 1 } }), submenu.items.map((submenuItem) => {
                 if (!(submenuItem.action.type === MENU_ACTION_TYPE.SUBMENU)) {

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/Button.stories.d.ts

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Default: Story;
 export declare const CustomColor: Story;
+export declare const Link: Story;
 export declare const OutlineButton: Story;
 export declare const TextButton: Story;
 export declare const IconButton: Story;

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

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SearchIcon from '@mui/icons-material/Search';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import SettingsIcon from '@mui/icons-material/Settings';
-import { BUTTON_SIZE, BUTTON_TYPE, Button } from '.';
+import { BUTTON_SIZE, BUTTON_TYPE, Button, LinkButton } from '.';
 import { GROUP_TYPE, Group } from '../Group';
 import { HEADING_SIZE, Heading } from '../text/Heading';
 import { Column } from '../layout/Column';
-import { COLOR } from '../../../theme/colors';
 import { Row } from '../layout/Row';
+import { Paragraph } from '../text/Paragraph';
+import { COLOR } from '../../../theme/colors';
 const meta = {
     title: 'Elements/Button',
     component: Button,
@@ -26,8 +27,16 @@ export const Default = {
         children: 'Click Me',
     },
 };
+const facebookBlue = '#4267B2';
 export const CustomColor = {
-    render: (args) => (_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(Button, Object.assign({}, args, { size: size.size, color: COLOR.SECONDARY, sx: { mt: 1 } }))] })))) })),
+    render: (args) => (_jsxs(Column, { children: [_jsx(Paragraph, { children: "Use customColor prop for colors not in theme" }), _jsx(Row, { children: _jsx(Button, Object.assign({}, args, { customColor: facebookBlue, textColor: COLOR.WHITE, sx: { mt: 1 } })) })] })),
+    args: {
+        type: BUTTON_TYPE.DEFAULT,
+        children: 'Click Me',
+    },
+};
+export const Link = {
+    render: (args) => (_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(LinkButton, Object.assign({}, args, { sx: { mt: 1 } }))] })))) })),
     args: {
         type: BUTTON_TYPE.DEFAULT,
         children: 'Click Me',

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

@@ -1,5 +1,6 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
+import { StyledElementProps } from '../../../theme';
 import { COLOR } from '../../../theme/colors';
 export declare enum BUTTON_SIZE {
     SM = "sm",
@@ -11,13 +12,28 @@ export declare enum BUTTON_TYPE {
     TEXT = "text",
     OUTLINE = "outline"
 }
+type ButtonProps = StyledElementProps<HTMLButtonElement, {
+    size?: BUTTON_SIZE;
+    type?: BUTTON_TYPE;
+    color?: COLOR;
+    textColor?: COLOR;
+    customColor?: string;
+    primaryIcon?: React.FC<any>;
+    leftIcon?: React.FC<any>;
+    rightIcon?: React.FC<any>;
+    accessibleLabel?: string;
+    loading?: boolean;
+    disabled?: boolean;
+}>;
 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;
+    textColor?: COLOR | undefined;
+    customColor?: string | undefined;
     primaryIcon?: React.FC<any> | undefined;
     leftIcon?: React.FC<any> | undefined;
     rightIcon?: React.FC<any> | undefined;
@@ -25,3 +41,6 @@ export declare const Button: React.ForwardRefExoticComponent<{
     loading?: boolean | undefined;
     disabled?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
+type LinkButtonProps = Omit<ButtonProps, 'type' | 'color' | 'textColor'>;
+export declare const LinkButton: React.FC<LinkButtonProps>;
+export {};

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

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 /** @jsxImportSource theme-ui */
-import React, { useState } from 'react';
+import React from 'react';
 import { useTheme } from '../../../theme';
-import { COLOR, colors } from '../../../theme/colors';
+import { COLOR } from '../../../theme/colors';
 import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../theme/typography';
 import { Icon } from '../Icon';
 import { useEnvironment } from '../../providers/env';
@@ -52,17 +52,14 @@ export var BUTTON_TYPE;
     // ARROW
 })(BUTTON_TYPE || (BUTTON_TYPE = {}));
 export const Button = React.forwardRef((_a, ref) => {
-    var { size: sizeParam, type: typeParam, color, primaryIcon, leftIcon, rightIcon, disabled: disabledParam, children, sx, loading } = _a, rest = __rest(_a, ["size", "type", "color", "primaryIcon", "leftIcon", "rightIcon", "disabled", "children", "sx", "loading"]);
+    var { size: sizeParam, type: typeParam, color, customColor, textColor: textColorParam, primaryIcon, leftIcon, rightIcon, disabled: disabledParam, children, sx, loading } = _a, rest = __rest(_a, ["size", "type", "color", "customColor", "textColor", "primaryIcon", "leftIcon", "rightIcon", "disabled", "children", "sx", "loading"]);
     const disabled = disabledParam || loading;
     const theme = useTheme();
-    const [hover, setHover] = useState(false);
     const { flagInDevelopment } = useEnvironment();
     let bg = COLOR.PRIMARY;
-    let hoverBg = COLOR.PRIMARY_HIGHLIGHT;
-    let textColor = COLOR.TEXT;
-    let hoverTextColor = undefined;
     let borderColor = COLOR.TRANSPARENT;
     let cursor = 'pointer';
+    let textColor = COLOR.BACKGROUND;
     let hoverShadow = theme.boxShadow.NORMAL;
     let hoverDecoration = undefined;
     let hoverTransform = 'scale(1.03)';
@@ -73,7 +70,6 @@ export const Button = React.forwardRef((_a, ref) => {
     const paddingX = isIconButton || isTextButton ? 0 : defaultPaddingX[size];
     const height = isTextButton ? undefined : defaultHeight[size];
     const width = primaryIcon ? height : undefined;
-    // const height = width;
     if (isIconButton && !rest['aria-label']) {
         flagInDevelopment('Icon buttons should include aria-label prop for accessibility');
     }
@@ -81,53 +77,37 @@ export const Button = React.forwardRef((_a, ref) => {
         hoverTransform = 'scale(1.15)';
     }
     if (type === BUTTON_TYPE.DEFAULT) {
-        bg = color || COLOR.PRIMARY;
-        hoverBg =
-            bg === COLOR.PRIMARY
-                ? COLOR.PRIMARY_HIGHLIGHT
-                : bg === COLOR.SECONDARY
-                    ? COLOR.SECONDARY_HIGHLIGHT
-                    : bg;
-        textColor =
-            bg === COLOR.PRIMARY
-                ? COLOR.TEXT_ON_PRIMARY
-                : bg === COLOR.SECONDARY
-                    ? COLOR.TEXT_ON_SECONDARY
-                    : COLOR.TEXT;
-        hoverTextColor = textColor;
+        bg = color || COLOR.SECONDARY;
+        textColor = COLOR.BLACK;
     }
     if (type === BUTTON_TYPE.TEXT) {
         bg = COLOR.TRANSPARENT;
-        hoverBg = bg;
         textColor = color || COLOR.PRIMARY;
-        hoverTextColor = textColor;
         hoverShadow = undefined;
         hoverDecoration = 'underline';
     }
     if (type === BUTTON_TYPE.OUTLINE) {
         bg = COLOR.BACKGROUND;
-        hoverBg = COLOR.BACKGROUND;
         textColor = color || COLOR.PRIMARY;
-        hoverTextColor = textColor;
         borderColor = textColor;
     }
+    if (textColorParam) {
+        textColor = textColorParam;
+    }
     if (disabled) {
         cursor = 'not-allowed';
-        if (bg === COLOR.PRIMARY) {
-            bg = hoverBg = COLOR.LIGHT_GRAY;
-        }
         if (bg === COLOR.BACKGROUND || bg === COLOR.TRANSPARENT) {
-            textColor = COLOR.LIGHT_GRAY;
+            textColor = COLOR.GRAY;
         }
         else {
-            bg = COLOR.LIGHT_GRAY;
+            bg = COLOR.GRAY;
         }
     }
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
     let body = children;
     if (primaryIcon) {
-        body = (_jsx(Icon, { icon: primaryIcon, size: getIconSize(typographyStyles.fontSize), color: hover ? hoverTextColor : textColor }));
+        body = (_jsx(Icon, { icon: primaryIcon, size: getIconSize(typographyStyles.fontSize), color: textColor }));
     }
     if (loading) {
         body = (_jsxs("div", Object.assign({ sx: {
@@ -137,33 +117,24 @@ 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, tabIndex: disabled ? -1 : 0, disabled: disabled, onMouseEnter: () => {
-            setHover(true);
-        }, onMouseLeave: () => {
-            setHover(false);
-        }, sx: Object.assign(Object.assign({ cursor, bg: bg || colors.primary, color: textColor, px: paddingX, width: width, height: height, border: 'solid 1px', borderRadius: '4px', borderColor, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', ':hover': !disabled
-                ? {
-                    bg: hoverBg,
-                    color: hoverTextColor,
-                    boxShadow: hoverShadow,
-                    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: {
+    const hoverStyles = !disabled
+        ? {
+            boxShadow: hoverShadow,
+            transform: hoverTransform,
+            textDecoration: hoverDecoration,
+        }
+        : undefined;
+    return (_jsxs("button", Object.assign({ ref: ref, tabIndex: disabled ? -1 : 0, disabled: disabled, css: {
+            backgroundColor: customColor,
+        }, sx: Object.assign(Object.assign({ cursor, bg: customColor ? undefined : bg, color: textColor, px: paddingX, width: width, height: height, border: 'solid 1px', borderRadius: '4px', borderColor, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', ':hover': hoverStyles, ':focus': hoverStyles }, typographyStyles), sx) }, rest, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: textColor })), _jsx("div", Object.assign({ css: {
                     flexGrow: 1,
                     justifyContent: 'flex-start',
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     textAlign: 'start',
-                } }, { children: body })), rightIcon && (_jsx(Icon, { icon: rightIcon, size: typographyStyles.fontSize, sx: { ml: iconMargin[size] }, color: hover ? hoverTextColor : textColor }))] })));
+                } }, { children: body })), rightIcon && (_jsx(Icon, { icon: rightIcon, size: typographyStyles.fontSize, sx: { ml: iconMargin[size] }, color: textColor }))] })));
 });
+export const LinkButton = (props) => {
+    return (_jsx(Button, Object.assign({}, props, { color: COLOR.ND_BLUE_BRIGHT, textColor: COLOR.WHITE })));
+};

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

@@ -126,12 +126,12 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, onSelect
                     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': {
+                }, sx: Object.assign(Object.assign({ height, width: DEFAULT_WIDTH, border: 'solid 1px', borderColor: COLOR.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);
+                    } }, 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/Fields/TextInput/index.js

@@ -47,7 +47,7 @@ export const TextInput = React.forwardRef((_a, ref) => {
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
     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': {
+            display, px: paddingX, border: 'solid 1px', borderColor: COLOR.GRAY, borderRadius: '4px', flexDirection: 'row', alignItems: 'center', ':hover': {
                 boxShadow: theme.boxShadow.NORMAL,
             }, ':focus': {
                 boxShadow: theme.boxShadow.NORMAL,

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,10 +21,12 @@ 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 ? COLOR.FAINT_GRAY : COLOR.BACKGROUND,
+                backgroundColor: focused === option.value
+                    ? COLOR.EXTRA_EXTRA_LIGHT_GRAY
+                    : COLOR.BACKGROUND,
                 cursor: 'pointer',
                 borderBottom: 'solid 1px',
                 borderBottomColor: COLOR.LIGHT_GRAY,
@@ -39,7 +41,7 @@ function ListBoxInner(_a, ref) {
                     borderTopLeftRadius: '4px',
                 },
                 ':hover': {
-                    backgroundColor: COLOR.FAINT_GRAY,
+                    backgroundColor: COLOR.EXTRA_EXTRA_LIGHT_GRAY,
                 },
             } }, { children: renderOption({
                 option,

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,8 +3,9 @@ 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 } from './components/elements/Button';
+export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elements/Button';
 export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
 export { Label, LABEL_SIZE } from './components/elements/text/Label';
 export { Paragraph, PARAGRAPH_SIZE } from './components/elements/text/Paragraph';

package/dist/index.js

@@ -3,8 +3,9 @@ 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 } from './components/elements/Button';
+export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elements/Button';
 export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
 export { Label, LABEL_SIZE } from './components/elements/text/Label';
 export { Paragraph, PARAGRAPH_SIZE } from './components/elements/text/Paragraph';

package/dist/theme/Color.stories.js

@@ -16,12 +16,18 @@ const colors = [
     { color: COLOR.BACKGROUND, label: 'BACKGROUND' },
     { color: COLOR.PRIMARY, label: 'PRIMARY' },
     { color: COLOR.PRIMARY_HIGHLIGHT, label: 'PRIMARY_HIGHLIGHT' },
-    { color: COLOR.TEXT_ON_PRIMARY, label: 'TEXT_ON_PRIMARY' },
-    { color: COLOR.SECONDARY, label: 'SECONDARY' },
-    { color: COLOR.SECONDARY_HIGHLIGHT, label: 'SECONDARY_HIGHLIGHT' },
-    { color: COLOR.TEXT_ON_SECONDARY, label: 'TEXT_ON_SECONDARY' },
+    { color: COLOR.GRAY, label: 'GRAY' },
+    { color: COLOR.DARK_GRAY, label: 'DARK_GRAY' },
+    { color: COLOR.LIGHT_GRAY, label: 'LIGHT GRAY' },
+    { color: COLOR.EXTRA_LIGHT_GRAY, label: 'EXTRA_LIGHT_GRAY' },
+    { color: COLOR.EXTRA_EXTRA_LIGHT_GRAY, label: 'EXTRA_EXTRA_LIGHT_GRAY' },
     { color: COLOR.ND_BLUE, label: 'ND_BLUE' },
+    { color: COLOR.ND_BLUE_DARK, label: 'ND_BLUE_DARK' },
+    { color: COLOR.ND_BLUE_LIGHT, label: 'ND_BLUE_LIGHT' },
+    { color: COLOR.ND_BLUE_BRIGHT, label: 'ND_BLUE_BRIGHT' },
     { color: COLOR.ND_GOLD, label: 'ND_GOLD' },
+    { color: COLOR.ND_GOLD_LIGHT, label: 'ND_GOLD_LIGHT' },
+    { color: COLOR.ND_GOLD_DARK, label: 'ND_GOLD_DARK' },
     { color: COLOR.ND_METALLIC_GOLD, label: 'ND_METALLIC_GOLD' },
     { color: COLOR.ND_PROVOST_BLUE, label: 'ND_PROVOST_BLUE' },
     { color: COLOR.ND_SECONDARY_1, label: 'ND_SECONDARY_1' },

package/dist/theme/colors.d.ts

@@ -3,16 +3,25 @@ export declare enum COLOR {
     BACKGROUND = "background",
     TRANSPARENT = "transparent",
     PRIMARY = "primary",
+    TEXT_ON_PRIMARY = "textOnPrimary",
     PRIMARY_HIGHLIGHT = "primaryHighlight",
     SECONDARY = "secondary",
-    SECONDARY_HIGHLIGHT = "secondaryHighlight",
-    TEXT_ON_PRIMARY = "textOnPrimary",
     TEXT_ON_SECONDARY = "textOnSecondary",
+    SECONDARY_HIGHLIGHT = "secondaryHighlight",
+    WHITE = "white",
+    BLACK = "black",
+    DARK_GRAY = "darkGray",
+    GRAY = "gray",
     LIGHT_GRAY = "lightGray",
-    FAINT_GRAY = "faintGray",
+    EXTRA_LIGHT_GRAY = "extraLightGray",
+    EXTRA_EXTRA_LIGHT_GRAY = "extraExtraLightGray",
     ND_BLUE = "ndBlue",
+    ND_BLUE_DARK = "ndBlueDark",
     ND_BLUE_LIGHT = "ndBlueLight",
+    ND_BLUE_BRIGHT = "ndBlueBright",
     ND_GOLD = "ndGold",
+    ND_GOLD_LIGHT = "ndGoldLight",
+    ND_GOLD_DARK = "ndGoldDark",
     ND_SKY_BLUE = "ndSkyBlue",
     ND_SKY_BLUE_DARK = "ndSkyBlueDark",
     ND_METALLIC_GOLD = "ndMetallicGold",

package/dist/theme/colors.js

@@ -4,16 +4,25 @@ export var COLOR;
     COLOR["BACKGROUND"] = "background";
     COLOR["TRANSPARENT"] = "transparent";
     COLOR["PRIMARY"] = "primary";
+    COLOR["TEXT_ON_PRIMARY"] = "textOnPrimary";
     COLOR["PRIMARY_HIGHLIGHT"] = "primaryHighlight";
     COLOR["SECONDARY"] = "secondary";
-    COLOR["SECONDARY_HIGHLIGHT"] = "secondaryHighlight";
-    COLOR["TEXT_ON_PRIMARY"] = "textOnPrimary";
     COLOR["TEXT_ON_SECONDARY"] = "textOnSecondary";
+    COLOR["SECONDARY_HIGHLIGHT"] = "secondaryHighlight";
+    COLOR["WHITE"] = "white";
+    COLOR["BLACK"] = "black";
+    COLOR["DARK_GRAY"] = "darkGray";
+    COLOR["GRAY"] = "gray";
     COLOR["LIGHT_GRAY"] = "lightGray";
-    COLOR["FAINT_GRAY"] = "faintGray";
+    COLOR["EXTRA_LIGHT_GRAY"] = "extraLightGray";
+    COLOR["EXTRA_EXTRA_LIGHT_GRAY"] = "extraExtraLightGray";
     COLOR["ND_BLUE"] = "ndBlue";
+    COLOR["ND_BLUE_DARK"] = "ndBlueDark";
     COLOR["ND_BLUE_LIGHT"] = "ndBlueLight";
+    COLOR["ND_BLUE_BRIGHT"] = "ndBlueBright";
     COLOR["ND_GOLD"] = "ndGold";
+    COLOR["ND_GOLD_LIGHT"] = "ndGoldLight";
+    COLOR["ND_GOLD_DARK"] = "ndGoldDark";
     COLOR["ND_SKY_BLUE"] = "ndSkyBlue";
     COLOR["ND_SKY_BLUE_DARK"] = "ndSkyBlueDark";
     COLOR["ND_METALLIC_GOLD"] = "ndMetallicGold";
@@ -38,20 +47,29 @@ export var COLOR;
     COLOR["ALERT_WARNING_BORDER"] = "alertWarningBorder";
 })(COLOR || (COLOR = {}));
 export const colors = {
-    [COLOR.TEXT]: '#222222',
+    [COLOR.TEXT]: '#333333',
     [COLOR.BACKGROUND]: '#ffffff',
     [COLOR.TRANSPARENT]: 'rgba(0,0,0,0)',
     [COLOR.PRIMARY]: '#0c2340',
-    [COLOR.PRIMARY_HIGHLIGHT]: '#000d1d',
     [COLOR.TEXT_ON_PRIMARY]: '#ffffff',
-    [COLOR.SECONDARY]: '#f8e999',
+    [COLOR.PRIMARY_HIGHLIGHT]: '#000d1d',
+    [COLOR.SECONDARY]: '#d39f10',
     [COLOR.SECONDARY_HIGHLIGHT]: '#ddcc70',
-    [COLOR.TEXT_ON_SECONDARY]: '#242111',
-    [COLOR.LIGHT_GRAY]: '#767676',
-    [COLOR.FAINT_GRAY]: '#eeeeee',
+    [COLOR.TEXT_ON_SECONDARY]: '#040401',
+    [COLOR.WHITE]: '#ffffff',
+    [COLOR.BLACK]: '#000000',
+    [COLOR.DARK_GRAY]: '#333333',
+    [COLOR.GRAY]: '#555555',
+    [COLOR.LIGHT_GRAY]: '#d2d2d2',
+    [COLOR.EXTRA_LIGHT_GRAY]: '#e2e2e2',
+    [COLOR.EXTRA_EXTRA_LIGHT_GRAY]: '#f2f2f2',
+    [COLOR.ND_GOLD]: '#ae9142',
+    [COLOR.ND_GOLD_LIGHT]: '#d39f10',
+    [COLOR.ND_GOLD_DARK]: '#8c7535',
     [COLOR.ND_BLUE]: '#0c2340',
+    [COLOR.ND_BLUE_DARK]: '#081629',
     [COLOR.ND_BLUE_LIGHT]: '#143865',
-    [COLOR.ND_GOLD]: '#d39F10',
+    [COLOR.ND_BLUE_BRIGHT]: '#1c4f8f',
     [COLOR.ND_SKY_BLUE]: '#e1e8f2',
     [COLOR.ND_SKY_BLUE_DARK]: '#c1cddd',
     [COLOR.ND_METALLIC_GOLD]: '#ae9142',

package/dist/theme/index.d.ts

@@ -11,16 +11,25 @@ export declare const theme: {
         background: string;
         transparent: string;
         primary: string;
+        textOnPrimary: string;
         primaryHighlight: string;
         secondary: string;
-        secondaryHighlight: string;
-        textOnPrimary: string;
         textOnSecondary: string;
+        secondaryHighlight: string;
+        white: string;
+        black: string;
+        darkGray: string;
+        gray: string;
         lightGray: string;
-        faintGray: string;
+        extraLightGray: string;
+        extraExtraLightGray: string;
         ndBlue: string;
+        ndBlueDark: string;
         ndBlueLight: string;
+        ndBlueBright: string;
         ndGold: string;
+        ndGoldLight: string;
+        ndGoldDark: string;
         ndSkyBlue: string;
         ndSkyBlueDark: string;
         ndMetallicGold: string;
@@ -87,23 +96,32 @@ 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;
         background: string;
         transparent: string;
         primary: string;
+        textOnPrimary: string;
         primaryHighlight: string;
         secondary: string;
-        secondaryHighlight: string;
-        textOnPrimary: string;
         textOnSecondary: string;
+        secondaryHighlight: string;
+        white: string;
+        black: string;
+        darkGray: string;
+        gray: string;
         lightGray: string;
-        faintGray: string;
+        extraLightGray: string;
+        extraExtraLightGray: string;
         ndBlue: string;
+        ndBlueDark: string;
         ndBlueLight: string;
+        ndBlueBright: string;
         ndGold: string;
+        ndGoldLight: string;
+        ndGoldDark: string;
         ndSkyBlue: string;
         ndSkyBlueDark: string;
         ndMetallicGold: string;

package/package.json

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