@ndlib/component-library 0.0.21 → 0.0.23

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

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof Card>;
 export default meta;
 type Story = StoryObj<typeof Card>;
 export declare const Default: Story;
+export declare const TruncateHeadline: Story;
 export declare const Horizontal: Story;
 export declare const DateCards: Story;
 export declare const Clickable: Story;

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import AccessTime from '@mui/icons-material/AccessTimeFilled';
 import CalendarIcon from '@mui/icons-material/CalendarMonth';
 import { CARD_LAYOUT, CARD_SIZE, Card } from '.';
-import { COLOR, Column, LABEL_SIZE, Label, Paragraph } from '../../..';
+import { COLOR, Column, LABEL_SIZE, Label, Paragraph, ReadMore, TYPOGRAPHY_TYPE, } from '../../..';
 import { Icon } from '../../elements/Icon';
 const meta = {
     title: 'Composites/Card',
@@ -18,7 +18,7 @@ const basicCards = [
         size: CARD_SIZE.SM,
     },
     {
-        headline: 'One Book, One Michiana Digital Exhibit — Papers Alight: Contextualizing Mike Curato’s Flamer',
+        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,
     },
@@ -40,7 +40,7 @@ const horizontalCards = [
         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,
-        body: (_jsxs(_Fragment, { children: [_jsxs(Label, Object.assign({ color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
+        children: (_jsxs(_Fragment, { children: [_jsxs(Label, Object.assign({ color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
                         display: 'flex',
                     } }, { children: [_jsx(Icon, { icon: CalendarIcon, sx: { mr: 1 } }), "Monday, February 6 \u2013 Monday, July 31, 2023"] })), _jsxs(Label, Object.assign({ color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
                         display: 'flex',
@@ -50,17 +50,21 @@ const horizontalCards = [
         headline: 'One Book, One Michiana Digital Exhibit — Papers Alight: Contextualizing Mike Curato’s Flamer',
         image: 'https://images.ctfassets.net/cfblb1f7i85j/2sGpdDbNkl6MPnlem6wq1R/995c786624613b5ff07228e481996385/One.Book.2023-Rep.png?w=296',
         size: CARD_SIZE.SM,
-        body: (_jsxs(_Fragment, { children: [_jsxs(Label, Object.assign({ color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
+        children: ({ activeBackground }) => (_jsxs(_Fragment, { children: [_jsxs(Label, Object.assign({ color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
                         display: 'flex',
                     } }, { children: [_jsx(Icon, { icon: CalendarIcon, sx: { mr: 1 } }), "Monday, February 6 \u2013 Monday, July 31, 2023"] })), _jsxs(Label, Object.assign({ color: COLOR.PRIMARY, size: LABEL_SIZE.SM, sx: {
                         display: 'flex',
-                    } }, { children: [_jsx(Icon, { icon: AccessTime, sx: { mr: 1 } }), "M-F: 9:30am \u2013 4:30pm"] })), _jsx(Paragraph, { children: "This online exhibition displays rare materials from Hesburgh Libraries collections that place Mike Curato\u2019s teen graphic novel into a historical and social context." })] })),
+                    } }, { children: [_jsx(Icon, { icon: AccessTime, sx: { mr: 1 } }), "M-F: 9:30am \u2013 4:30pm"] })), _jsx(ReadMore, Object.assign({ typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, lines: 2, sx: { bg: activeBackground } }, { children: "This online exhibition displays rare materials from Hesburgh Libraries collections that place Mike Curato\u2019s teen graphic novel into a historical and social context." }))] })),
     },
 ];
 export const Default = {
     render: () => (_jsx(Column, { children: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i })))) })),
     args: {},
 };
+export const TruncateHeadline = {
+    render: () => (_jsx(Column, { children: basicCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, truncateHeadlineAfter: 2 })))) })),
+    args: {},
+};
 export const Horizontal = {
     render: () => (_jsx(Column, { children: horizontalCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, layout: CARD_LAYOUT.HORIZONTAL })))) })),
     args: {},

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

@@ -12,7 +12,7 @@ describe('Card', () => {
         vi.resetAllMocks();
     });
     it('renders contents', () => {
-        const { getByText } = render(_jsx(Card, { headline: MOCK_HEADLINE, body: MOCK_BODY }));
+        const { getByText } = render(_jsx(Card, Object.assign({ headline: MOCK_HEADLINE }, { children: MOCK_BODY })));
         expect(getByText(MOCK_HEADLINE)).toBeDefined();
         expect(getByText(MOCK_BODY)).toBeDefined();
     });

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

@@ -1,4 +1,5 @@
 import { StyledElementProps } from '../../../theme';
+import { COLOR } from '../../../theme/colors';
 import React from 'react';
 export declare enum CARD_LAYOUT {
     VERTICAL = "vertical",
@@ -9,14 +10,20 @@ export declare enum CARD_SIZE {
     MD = "MD",
     LG = "LG"
 }
-type CardProps = StyledElementProps<HTMLDivElement, {
+type CardState = {
+    isHovered: boolean;
+    activeBackground: COLOR;
+};
+type CardChildren = React.ReactNode | ((state: CardState) => React.ReactNode);
+export type CardProps = StyledElementProps<HTMLDivElement, {
     headline: string;
+    truncateHeadlineAfter?: number;
     body?: React.ReactNode;
     image?: string;
     layout?: CARD_LAYOUT;
     size?: CARD_SIZE;
     displayDate?: string;
     onClick?: () => void;
-}>;
+}, CardChildren>;
 export declare const Card: React.FC<CardProps>;
 export {};

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Heading } from '../../elements/text/Heading';
+import { ReadMore } from '../../elements/text/ReadMore';
 import { GROUP_TYPE, Group } from '../../elements/Group';
 import { Box } from '../../elements/layout/Box';
 import { Column, FONT, FONT_SIZE, Row, TYPOGRAPHY_TYPE } from '../../..';
 import { COLOR } from '../../../theme/colors';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { KEY_CODES } from '../../../utils/misc';
+import { useHover } from '../../../utils/hooks/useHover';
 export var CARD_LAYOUT;
 (function (CARD_LAYOUT) {
     CARD_LAYOUT["VERTICAL"] = "vertical";
@@ -48,15 +50,20 @@ const DateDisplay = ({ date: dateString }) => {
                     mt: 1,
                 } }, { children: MONTH_LABELS[date.getMonth()] }))] })));
 };
-export const Card = ({ size, displayDate, headline, body, image, layout, onClick, sx, }) => {
+export const Card = ({ size, displayDate, headline, image, layout, onClick, truncateHeadlineAfter, sx, children, }) => {
     const contentPaddingX = size === CARD_SIZE.SM ? 4 : 5;
     const bodyTopMargin = size === CARD_SIZE.SM ? 2 : 3;
     const isVertical = !layout || layout === CARD_LAYOUT.VERTICAL;
+    const { isHovered, anchorElementProps } = useHover();
+    const [activeBackground, setActiveBackground] = useState(isHovered ? COLOR.ND_SKY_BLUE : COLOR.BACKGROUND);
+    useEffect(() => {
+        setActiveBackground(isHovered ? COLOR.ND_SKY_BLUE : COLOR.BACKGROUND);
+    }, [isHovered]);
     const contentPaddingY = isVertical ? contentPaddingX : 2;
     const typography = size === CARD_SIZE.SM
         ? TYPOGRAPHY_TYPE.HEADLINE_SMALL
         : TYPOGRAPHY_TYPE.HEADLINE_MEDIUM;
-    return (_jsxs(Group, Object.assign({ type: GROUP_TYPE.GROUP, role: onClick ? 'button' : 'group', onClick: onClick, onKeyDown: (e) => {
+    return (_jsxs(Group, Object.assign({}, anchorElementProps, { type: GROUP_TYPE.GROUP, role: onClick ? 'button' : 'group', onClick: onClick, onKeyDown: (e) => {
             if (onClick && e.key === KEY_CODES.ENTER) {
                 onClick();
             }
@@ -67,5 +74,7 @@ export const Card = ({ size, displayDate, headline, body, image, layout, onClick
             } }, 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: headline })), body && _jsx(Box, Object.assign({ sx: { mt: bodyTopMargin } }, { children: body }))] })) }))] })));
+                } })), 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'
+                                ? children({ isHovered, activeBackground })
+                                : children })))] })) }))] })));
 };

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+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';
@@ -8,6 +8,9 @@ import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
 import { Link } from '../../elements/Link';
 import { LINE_HEIGHT } from '../../../theme/typography';
 import { COLOR } from '../../../theme/colors';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+// import { Column, HEADING_SIZE, Heading, LINE_HEIGHT, Link, Row } from "../../.."
+const ChevronRightIcon = importedDefaultComponentShim(_ChevronRightIcon);
 export const NavMenu = (props) => {
     const { isOpen, activePath, getMenuItem, getMenuItemProps, getMenuProps } = useMenu();
     if (!isOpen) {

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

@@ -10,8 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import WarningIcon from '@mui/icons-material/Warning';
-import InfoIcon from '@mui/icons-material/Info';
+import _WarningIcon from '@mui/icons-material/Warning';
+import _InfoIcon from '@mui/icons-material/Info';
 import { COLOR } from '../../../theme/colors';
 import { Markdown } from '../Markdown';
 import { Row } from '../layout/Row';
@@ -20,6 +20,9 @@ import { FONT_SIZE } from '../../../theme/typography';
 import { useAlerts, ALERT_TYPE } from '../../providers/alerts';
 import { useTheme } from '../../../theme';
 import { BUTTON_TYPE, Button } from '../Button';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+const WarningIcon = importedDefaultComponentShim(_WarningIcon);
+const InfoIcon = importedDefaultComponentShim(_InfoIcon);
 export const Alerts = (_a) => {
     var { pageAlerts } = _a, rest = __rest(_a, ["pageAlerts"]);
     const { alerts, dismiss } = useAlerts(pageAlerts);

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

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

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof DatePicker>;
 export declare const Default: Story;
 export declare const Inline: Story;
+export declare const HighlightedDates: Story;

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

@@ -10,7 +10,9 @@ const meta = {
 export default meta;
 const StatefulDatePicker = (props) => {
     const [date, setDate] = useState(new Date());
-    return _jsx(DatePicker, Object.assign({}, props, { value: date, onChange: setDate }));
+    return (_jsx(DatePicker, Object.assign({}, props, { value: date, onChange: (d) => {
+            setDate(d);
+        } })));
 };
 export const Default = {
     render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { placeholder: "test" }) }))),
@@ -18,3 +20,12 @@ export const Default = {
 export const Inline = {
     render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { inline: true }) }))),
 };
+export const HighlightedDates = {
+    render: () => {
+        const highlightedDate1 = new Date();
+        highlightedDate1.setDate(highlightedDate1.getDate() + 1);
+        const highlightedDate2 = new Date();
+        highlightedDate2.setDate(highlightedDate2.getDate() - 1);
+        return (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { inline: true, highlightDates: [highlightedDate1, highlightedDate2] }) })));
+    },
+};

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

@@ -14,6 +14,7 @@ export declare const DatePicker: React.FC<{
     minDate?: Date;
     maxDate?: Date;
     inline?: boolean;
+    highlightDates?: Date[];
     wrapperProps?: BoxProps;
     inputProps?: Partial<TextInputProps>;
 }>;

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

@@ -11,11 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import ReactDatePicker from 'react-datepicker';
+import _ReactDatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { TextInput } from '../TextInput';
-import CalendarIcon from '@mui/icons-material/CalendarMonth';
+import _CalendarIcon from '@mui/icons-material/CalendarMonth';
 import { Box } from '../../layout/Box';
+import { importedDefaultComponentShim } from '../../../../utils/misc';
+const CalendarIcon = importedDefaultComponentShim(_CalendarIcon);
+const ReactDatePicker = importedDefaultComponentShim(_ReactDatePicker);
 // 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) => {
@@ -28,7 +31,20 @@ export const InputWrapper = React.forwardRef(({ onChange, value, children, onCli
     });
 });
 const PermissiveTextInput = TextInput;
+const areDatesEqual = (d1, d2) => {
+    const serializeDate = (d) => `${d.getFullYear()} ${d.getMonth()} ${d.getDate()}`;
+    return serializeDate(d1) === serializeDate(d2);
+};
 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)) })));
+    var { value, wrapperProps, inputProps, highlightDates } = _a, rest = __rest(_a, ["value", "wrapperProps", "inputProps", "highlightDates"]);
+    const highlightDateSet = new Set(highlightDates === null || highlightDates === void 0 ? void 0 : highlightDates.map((d) => d.toDateString()));
+    return (_jsx(Box, Object.assign({}, wrapperProps, { children: _jsx(ReactDatePicker, Object.assign({ calendarClassName: "ndlib-date-picker", selected: value, dayClassName: (date) => {
+                if (areDatesEqual(date, value)) {
+                    return '';
+                }
+                if (highlightDateSet.has(date.toDateString())) {
+                    return 'ndlib-date-picker-highlight';
+                }
+                return '';
+            }, customInput: _jsx(InputWrapper, { children: _jsx(PermissiveTextInput, Object.assign({}, inputProps)) }) }, rest)) })));
 };

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

@@ -10,11 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import ReactDatePicker from 'react-datepicker';
+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';
+import { importedDefaultComponentShim } from '../../../../utils/misc';
+const ReactDatePicker = importedDefaultComponentShim(_ReactDatePicker);
 const PermissiveTextInput = TextInput;
 export const MonthPicker = (_a) => {
     var { value, inputProps, wrapperProps } = _a, rest = __rest(_a, ["value", "inputProps", "wrapperProps"]);

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import _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';
@@ -9,8 +9,9 @@ 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 { KEY_CODES, importedDefaultComponentShim } from '../../../../utils/misc';
 import { COLOR } from '../../../../theme/colors';
+const ArrowDropDownIcon = importedDefaultComponentShim(_ArrowDropDownIcon);
 const typographyMap = {
     [INPUT_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
     [INPUT_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,

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;
-} & React.HTMLAttributes<HTMLInputElement> & {
+} & Omit<React.HTMLAttributes<HTMLInputElement>, "children"> & {
     size?: INPUT_SIZE | undefined;
     leftIcon?: React.FC<any> | undefined;
     inline?: boolean | undefined;

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

@@ -18,7 +18,7 @@ export const Icon = (_a) => {
     const InnerComponent = icon;
     return (_jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign({}, sx), { fontSize: size, display: 'flex', alignItems: 'center', justifyContent: 'center' }) }, { children: React.createElement(InnerComponent, {
             fontSize: 'inherit',
-            sx: {
+            style: {
                 color: colors[color || COLOR.PRIMARY],
             },
         }) })));

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

@@ -12,13 +12,18 @@ 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 from 'react';
-import CircleIcon from '@mui/icons-material/Circle';
-import CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';
-import SquareIcon from '@mui/icons-material/Square';
-import SquareOutlinedIcon from '@mui/icons-material/SquareOutlined';
+import _CircleIcon from '@mui/icons-material/Circle';
+import _CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';
+import _SquareIcon from '@mui/icons-material/Square';
+import _SquareOutlinedIcon from '@mui/icons-material/SquareOutlined';
 import { COLOR, Label, TYPOGRAPHY_TYPE } from '../../..';
 import { FONT_SIZE, getTypographyStyles } from '../../../theme/typography';
 import { Icon } from '../Icon';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+const CircleIcon = importedDefaultComponentShim(_CircleIcon);
+const CircleOutlinedIcon = importedDefaultComponentShim(_CircleOutlinedIcon);
+const SquareIcon = importedDefaultComponentShim(_SquareIcon);
+const SquareOutlinedIcon = importedDefaultComponentShim(_SquareOutlinedIcon);
 export var LIST_SIZE;
 (function (LIST_SIZE) {
     LIST_SIZE["SM"] = "sm";

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

@@ -16,7 +16,7 @@ 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;
-} & React.HTMLAttributes<HTMLDivElement> & {
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     options: Option[];
     renderOption?: RenderOption<Value, Option> | undefined;
     selected?: Value | undefined;

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

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

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SearchIcon from '@mui/icons-material/Search';
+import { PILL_SIZE, PILL_TYPE, Pill } from '.';
+import { GROUP_TYPE, Group } from '../Group';
+import { HEADING_SIZE, Heading } from '../text/Heading';
+import { Column } from '../layout/Column';
+import { Row } from '../layout/Row';
+const meta = {
+    title: 'Elements/Pill',
+    component: Pill,
+    tags: ['autodocs'],
+};
+export default meta;
+const sizes = [
+    { size: PILL_SIZE.LG, label: 'Large' },
+    { size: PILL_SIZE.SM, label: 'Small' },
+];
+export const Default = {
+    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 })), _jsxs(Row, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(Pill, Object.assign({}, args, { size: size.size, sx: { mr: 1 } })), _jsx(Pill, Object.assign({}, args, { size: size.size, type: PILL_TYPE.OUTLINE }))] }))] })))) })),
+    args: {
+        type: PILL_TYPE.DEFAULT,
+        children: 'Virtual Event',
+        onClick: () => console.log('clicked'),
+    },
+};
+export const Icon = {
+    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 })), _jsxs(Row, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(Pill, Object.assign({}, args, { size: size.size, sx: { mr: 1 }, icon: SearchIcon })), _jsx(Pill, Object.assign({}, args, { size: size.size, type: PILL_TYPE.OUTLINE, icon: SearchIcon }))] }))] })))) })),
+    args: {
+        type: PILL_TYPE.DEFAULT,
+        children: 'Virtual Event',
+        onClick: () => console.log('clicked'),
+    },
+};
+export const NoAction = {
+    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 })), _jsxs(Row, Object.assign({ sx: { mt: 2 } }, { children: [_jsx(Pill, Object.assign({}, args, { size: size.size, sx: { mr: 1 } })), _jsx(Pill, Object.assign({}, args, { size: size.size, type: PILL_TYPE.OUTLINE }))] }))] })))) })),
+    args: {
+        type: PILL_TYPE.DEFAULT,
+        children: 'Virtual Event',
+    },
+};

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

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

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { Pill } from '.';
+import { fireEvent } from '@testing-library/react';
+import { vitest } from 'vitest';
+describe('Pill', () => {
+    it('renders children', () => {
+        const { getByText } = render(_jsx(Pill, { children: "Test" }));
+        expect(getByText('Test')).toBeInTheDocument();
+    });
+    it('responds to onClick handler', () => {
+        const onClick = vitest.fn();
+        const { getByRole } = render(_jsx(Pill, { onClick: onClick }));
+        const button = getByRole('button');
+        fireEvent.click(button);
+        expect(onClick).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,20 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import { COLOR } from '../../../theme/colors';
+export declare enum PILL_SIZE {
+    SM = "sm",
+    LG = "lg"
+}
+export declare enum PILL_TYPE {
+    DEFAULT = "default",
+    OUTLINE = "outline"
+}
+export declare const Pill: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesProp | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> & {
+    size?: PILL_SIZE | undefined;
+    type?: PILL_TYPE | undefined;
+    color?: COLOR | undefined;
+    icon?: React.FC<any> | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,118 @@
+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";
+/** @jsxImportSource theme-ui */
+import React, { useState } from 'react';
+import { useTheme } from '../../../theme';
+import { COLOR, colors } from '../../../theme/colors';
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { Icon } from '../Icon';
+export var PILL_SIZE;
+(function (PILL_SIZE) {
+    PILL_SIZE["SM"] = "sm";
+    PILL_SIZE["LG"] = "lg";
+})(PILL_SIZE || (PILL_SIZE = {}));
+const typographyMap = {
+    [PILL_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_XSMALL,
+    [PILL_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
+};
+const defaultPaddingX = {
+    [PILL_SIZE.SM]: 2,
+    [PILL_SIZE.LG]: 3,
+};
+const defaultHeight = {
+    [PILL_SIZE.SM]: '1.75rem',
+    [PILL_SIZE.LG]: '2rem',
+};
+const iconMargin = {
+    [PILL_SIZE.SM]: 1,
+    [PILL_SIZE.LG]: 1,
+};
+export var PILL_TYPE;
+(function (PILL_TYPE) {
+    PILL_TYPE["DEFAULT"] = "default";
+    PILL_TYPE["OUTLINE"] = "outline";
+})(PILL_TYPE || (PILL_TYPE = {}));
+export const Pill = React.forwardRef((_a, ref) => {
+    var { size: sizeParam, type: typeParam, color, icon, children, sx, onClick } = _a, rest = __rest(_a, ["size", "type", "color", "icon", "children", "sx", "onClick"]);
+    const theme = useTheme();
+    const [hover, setHover] = useState(false);
+    const clickable = onClick !== undefined;
+    let bg = COLOR.PRIMARY;
+    let hoverBg = COLOR.PRIMARY_HIGHLIGHT;
+    let textColor = COLOR.TEXT;
+    let hoverTextColor = undefined;
+    let borderColor = COLOR.TRANSPARENT;
+    const cursor = clickable ? 'pointer' : 'default';
+    const hoverShadow = theme.boxShadow.NORMAL;
+    const hoverDecoration = undefined;
+    const hoverTransform = 'scale(1.03)';
+    const type = typeParam || PILL_TYPE.DEFAULT;
+    const size = sizeParam || PILL_SIZE.SM;
+    const paddingX = defaultPaddingX[size];
+    const height = defaultHeight[size];
+    if (type === PILL_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;
+    }
+    if (type === PILL_TYPE.OUTLINE) {
+        bg = COLOR.BACKGROUND;
+        hoverBg = COLOR.BACKGROUND;
+        textColor = color || COLOR.PRIMARY;
+        hoverTextColor = textColor;
+        borderColor = textColor;
+    }
+    const typography = typographyMap[size];
+    const typographyStyles = getTypographyStyles(typography);
+    const body = children;
+    return (_jsxs("button", Object.assign({ ref: ref, tabIndex: onClick ? -1 : 0, onClick: onClick, onMouseEnter: () => {
+            setHover(true);
+        }, onMouseLeave: () => {
+            setHover(false);
+        }, sx: Object.assign(Object.assign(Object.assign({}, typographyStyles), { cursor, borderRadius: '1000px', bg: bg || colors.primary, color: textColor, px: paddingX, height: height, border: 'solid 1px', borderColor, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', ':hover': clickable
+                ? {
+                    bg: hoverBg,
+                    color: hoverTextColor,
+                    boxShadow: hoverShadow,
+                    transform: hoverTransform,
+                    textDecoration: hoverDecoration,
+                }
+                : undefined, ':focus': clickable
+                ? {
+                    bg: hoverBg,
+                    color: hoverTextColor,
+                    boxShadow: hoverShadow,
+                    cursor: 'pointer',
+                    transform: hoverTransform,
+                    textDecoration: hoverDecoration,
+                }
+                : undefined }), sx) }, rest, { children: [icon && (_jsx(Icon, { icon: icon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: hover ? hoverTextColor : textColor })), _jsx("div", Object.assign({ css: {
+                    flexGrow: 1,
+                    justifyContent: 'flex-start',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textAlign: 'start',
+                } }, { children: body }))] })));
+});

package/dist/components/elements/layout/Flex.stories.d.ts

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<typeof Row>;
 export declare const Columns: Story;
 export declare const Rows: Story;
+export declare const ResponsiveRow: Story;
 export declare const FlexHelpers: Story;
 export declare const Centered: Story;

package/dist/components/elements/layout/Flex.stories.js

@@ -15,6 +15,9 @@ export const Columns = {
 export const Rows = {
     render: () => (_jsxs(Column, { children: [_jsx(Row, { children: _jsx(Paragraph, { children: "Row 1" }) }), _jsx(Row, { children: _jsx(Paragraph, { children: "Row 2" }) }), _jsx(Row, { children: _jsx(Paragraph, { children: "Row 3" }) })] })),
 };
+export const ResponsiveRow = {
+    render: () => (_jsxs(Row, Object.assign({ justify: "space-between", breakpoint: 0 }, { children: [_jsx(Column, { children: _jsx(Paragraph, { children: "Column 1" }) }), _jsx(Column, { children: _jsx(Paragraph, { children: "Column 2" }) }), _jsx(Column, { children: _jsx(Paragraph, { children: "Column 3" }) })] }))),
+};
 export const FlexHelpers = {
     render: () => (_jsxs(Row, Object.assign({ justify: "space-between" }, { children: [_jsx(Column, Object.assign({ align: "flex-end", grow: 1, sx: { bg: COLOR.PRIMARY, color: COLOR.TEXT_ON_PRIMARY } }, { children: _jsx(Row, { children: _jsx(Paragraph, { children: "Right-aligned" }) }) })), _jsx(Column, Object.assign({ grow: 1 }, { children: _jsx(Paragraph, { children: "Growing Column...................................................." }) })), _jsx(Column, Object.assign({ shrink: 1, sx: { bg: COLOR.PRIMARY, color: COLOR.TEXT_ON_PRIMARY } }, { children: _jsx(Paragraph, { children: "Shrinking Column" }) }))] }))),
 };

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

@@ -12,6 +12,8 @@ export type FlexHelperProps = {
     justify?: CSSProperties['justifyContent'];
     centered?: boolean;
 };
-type RowProps = StyledElementProps<HTMLDivElement, FlexHelperProps>;
+type RowProps = StyledElementProps<HTMLDivElement, FlexHelperProps & {
+    breakpoint?: number;
+}>;
 export declare const Row: React.FC<RowProps>;
 export {};

package/dist/components/elements/layout/Row.js

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { useMediaQuery } from '../../../utils/hooks/useMediaQuery';
 // Putting shared utils and types here so autodocs can pick them up
 export const convertFlexHelperProps = (props) => {
     const styleObject = {};
@@ -38,7 +39,9 @@ export const convertFlexHelperProps = (props) => {
     return styleObject;
 };
 export const Row = (_a) => {
-    var { sx, children } = _a, rest = __rest(_a, ["sx", "children"]);
+    var { sx, children, breakpoint: breakpointParam } = _a, rest = __rest(_a, ["sx", "children", "breakpoint"]);
+    const { breakpoint } = useMediaQuery();
+    const shouldRenderAsRow = breakpointParam !== undefined ? breakpoint > breakpointParam : true;
     const flexStyles = convertFlexHelperProps(rest);
-    return (_jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { display: 'flex', flexDirection: 'row' }) }, { children: children })));
+    return (_jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { display: 'flex', flexDirection: shouldRenderAsRow ? 'row' : 'column' }) }, { children: children })));
 };

package/dist/components/elements/text/ReadMore/ReadMore.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof ReadMore>;
 export declare const Default: Story;
 export declare const NotTruncated: Story;
+export declare const CustomColor: Story;

package/dist/components/elements/text/ReadMore/ReadMore.stories.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ReadMore } from '.';
 import { Column } from '../../layout/Column';
 import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
+import { COLOR } from '../../../../theme/colors';
 const meta = {
     title: 'Elements/ReadMore',
     component: ReadMore,
@@ -12,8 +13,15 @@ export default meta;
 const p1 = '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.';
 const p2 = 'Lorem ipsum dolor sit';
 export const Default = {
-    render: () => (_jsx(Column, { children: _jsx(ReadMore, { text: p1, sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM }) })),
+    render: () => (_jsx(Column, { children: _jsx(ReadMore, Object.assign({ sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM }, { children: p1 })) })),
 };
 export const NotTruncated = {
-    render: () => (_jsx(Column, { children: _jsx(ReadMore, { text: p2, sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM }) })),
+    render: () => (_jsx(Column, { children: _jsx(ReadMore, Object.assign({ sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM }, { children: p2 })) })),
+};
+export const CustomColor = {
+    render: () => (_jsx(Column, { children: _jsx(ReadMore, Object.assign({ lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, sx: {
+                color: COLOR.BACKGROUND,
+                bg: COLOR.PRIMARY,
+                width: '250px',
+            } }, { children: p1 })) })),
 };

package/dist/components/elements/text/ReadMore/index.d.ts

@@ -3,8 +3,7 @@ import React from 'react';
 import { StyledElementProps } from '../../../../theme';
 import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
 export declare const ReadMore: React.FC<StyledElementProps<HTMLDivElement, {
-    text: string;
     typography: TYPOGRAPHY_TYPE;
     lines: number;
     fixedHeight?: boolean;
-}>>;
+}, string>>;

package/dist/components/elements/text/ReadMore/index.js

@@ -13,19 +13,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 /** @jsxImportSource theme-ui */
 import React, { useState } from 'react';
 import { useTheme } from '../../../../theme';
-import { COLOR } from '../../../../theme/colors';
+import { COLOR, colors } from '../../../../theme/colors';
 import { getTypographyStyles, } from '../../../../theme/typography';
-const ReadMoreLink = () => {
+import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery';
+const ReadMoreLink = (props) => {
+    // const theme = useTheme()
+    const bg = colors[props.bg || COLOR.BACKGROUND];
+    const color = colors[props.color || COLOR.ND_BLUE_LIGHT];
     return (_jsx("div", Object.assign({ css: {
             whiteSpace: 'nowrap',
             position: 'absolute',
             right: 0,
             bottom: 0,
             paddingLeft: '3rem',
-            background: 'linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 30%, rgb(255, 255, 255))',
+            background: `linear-gradient(to right, ${bg}00, ${bg} 30%, ${bg} 100%)`,
         } }, { children: _jsx("div", Object.assign({ "aria-hidden": "true", sx: {
+                color,
                 transform: 'scale(0.9)',
-                color: COLOR.ND_BLUE_LIGHT,
                 cursor: 'pointer',
             } }, { children: "Read More..." })) })));
 };
@@ -45,10 +49,12 @@ const useLinesHeight = (args) => {
 // This component does not use the css property `text-overflow: ellipsis`
 // because it does not work with multiple lines of text.
 export const ReadMore = (_a) => {
-    var { text, typography, sx, role, lines, fixedHeight } = _a, rest = __rest(_a, ["text", "typography", "sx", "role", "lines", "fixedHeight"]);
+    var { typography, sx, role, lines, fixedHeight, children } = _a, rest = __rest(_a, ["typography", "sx", "role", "lines", "fixedHeight", "children"]);
     const ref = React.useRef(null);
     const [showEllipsis, setShowEllipsis] = useState(true);
     const wrapperHeight = useLinesHeight({ typography, lines });
+    const { screenSize } = useMediaQuery();
+    const { color, bg } = sx || {};
     React.useEffect(() => {
         if (ref.current) {
             // Check if the content exceeds the alloted space
@@ -66,9 +72,9 @@ export const ReadMore = (_a) => {
                 setShowEllipsis(false);
             }
         }
-    }, [text, wrapperHeight, fixedHeight]);
+    }, [children, wrapperHeight, fixedHeight, screenSize]);
     return (_jsxs("div", Object.assign({ role: role || 'paragraph', ref: ref, style: {
             overflow: 'hidden',
             position: 'relative',
-        }, sx: Object.assign(Object.assign({}, getTypographyStyles(typography)), sx) }, rest, { children: [text, showEllipsis && _jsx(ReadMoreLink, {})] })));
+        }, sx: Object.assign(Object.assign({}, getTypographyStyles(typography)), sx) }, rest, { children: [children, showEllipsis && _jsx(ReadMoreLink, { bg: bg, color: color })] })));
 };

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

@@ -8,6 +8,7 @@ export type UiConfig = {
     alertsConfig?: AlertQueryParams;
     disableAlerts?: boolean;
     loadFonts?: boolean;
+    loadGlobalStyles?: boolean;
 };
 type UiProviderProps = PropsWithChildren<UiConfig>;
 export declare const UiProvider: React.FC<UiProviderProps>;

package/dist/components/providers/ui.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ComponentConfigProvider, } from './componentConfig';
 import { EnvironmentProvider } from './env';
-import { ThemeProvider } from './theme';
+import { ThemeProvider } from '../../theme/';
 import { AlertsProvider } from './alerts';
 import { FontLoader } from '../../FontLoader';
-export const UiProvider = ({ env, components, alertsConfig, children, loadFonts, }) => {
-    return (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(ThemeProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) })), loadFonts && _jsx(FontLoader, {})] })));
+import { GlobalStyles } from '../../theme/GlobalStyles';
+export const UiProvider = ({ env, components, alertsConfig, children, loadFonts, loadGlobalStyles, }) => {
+    return (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(ThemeProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) })), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {})] })));
 };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { theme, ThemeProvider, useTheme } from './theme';
 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 { BrandingBar } from './components/elements/BrandingBar';
 export { Button, BUTTON_SIZE, BUTTON_TYPE } from './components/elements/Button';
@@ -25,7 +26,10 @@ export { RadioGroup } from './components/elements/Fields/RadioGroup';
 export { List, ListItem, LIST_SIZE } from './components/elements/List';
 export { ReadMore } from './components/elements/text/ReadMore';
 export { Icon } from './components/elements/Icon';
+export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';
 export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';
+export { useHover } from './utils/hooks/useHover';
+export { useMediaQuery } from './utils/hooks/useMediaQuery';

package/dist/index.js

@@ -1,6 +1,7 @@
 export { theme, ThemeProvider, useTheme } from './theme';
 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 { BrandingBar } from './components/elements/BrandingBar';
 export { Button, BUTTON_SIZE, BUTTON_TYPE } from './components/elements/Button';
@@ -25,7 +26,10 @@ export { RadioGroup } from './components/elements/Fields/RadioGroup';
 export { List, ListItem, LIST_SIZE } from './components/elements/List';
 export { ReadMore } from './components/elements/text/ReadMore';
 export { Icon } from './components/elements/Icon';
+export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';
 export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';
+export { useHover } from './utils/hooks/useHover';
+export { useMediaQuery } from './utils/hooks/useMediaQuery';

package/dist/theme/GlobalStyles.js

@@ -147,6 +147,12 @@ const globalStyles = css `
     padding: 4px;
   }
 
+  .ndlib-date-picker .ndlib-date-picker-highlight {
+    background-color: ${colors.ndTertiary1};
+    border-radius: 0.3rem;
+    color: ${colors.background};
+  }
+
   @font-face {
     font-family: GPCMed;
     font-display: swap;

package/dist/theme/Typography.stories.js

@@ -9,6 +9,7 @@ const meta = {
 };
 export default meta;
 const types = [
+    { type: TYPOGRAPHY_TYPE.PARAGRAPH_XSMALL, label: 'Paragraph X Small' },
     { type: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL, label: 'Paragraph Small' },
     { type: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, label: 'Paragraph Medium' },
     { type: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE, label: 'Paragraph Large' },

package/dist/theme/index.d.ts

@@ -3,6 +3,7 @@ import { ThemeUICSSObject } from 'theme-ui';
 import { FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT } from './typography';
 import { COLOR } from './colors';
 import { BOX_SHADOW } from './custom';
+export declare const BREAKPOINTS: string[];
 export declare const SPACING: string[];
 export declare const theme: {
     colors: {
@@ -45,6 +46,7 @@ export declare const theme: {
     };
     space: string[];
     boxShadow: typeof BOX_SHADOW;
+    breakpoints: string[];
     fonts: {
         branded: string;
         branded2: string;
@@ -85,7 +87,7 @@ export type StylesProp = ThemeUICSSObject & {
 export type StyledElementProps<E extends Element, CustomProps = object, Children = React.ReactNode> = {
     sx?: StylesProp;
     children?: Children;
-} & React.HTMLAttributes<E> & CustomProps;
+} & Omit<React.HTMLAttributes<E>, 'children'> & CustomProps;
 export declare const useTheme: () => {
     colors: {
         text: string;
@@ -127,6 +129,7 @@ export declare const useTheme: () => {
     };
     space: string[];
     boxShadow: typeof BOX_SHADOW;
+    breakpoints: string[];
     fonts: {
         branded: string;
         branded2: string;

package/dist/theme/index.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ThemeProvider as ThemeUiProvider, useThemeUI, } from 'theme-ui';
+import { ThemeUIProvider, useThemeUI } from 'theme-ui';
 import { fontStyles, } from './typography';
 import { colors } from './colors';
 import { BOX_SHADOW } from './custom';
+export const BREAKPOINTS = ['576px', '768px', '992px', '1200px', '1400px'];
 export const SPACING = [
     '0rem',
     '0.25rem',
@@ -14,11 +15,11 @@ export const SPACING = [
     '3rem',
     '4rem',
 ];
-export const theme = Object.assign(Object.assign({}, fontStyles), { colors, space: SPACING, boxShadow: BOX_SHADOW });
+export const theme = Object.assign(Object.assign({}, fontStyles), { colors, space: SPACING, boxShadow: BOX_SHADOW, breakpoints: BREAKPOINTS });
 export const useTheme = () => {
     const { theme } = useThemeUI();
     return theme;
 };
 export const ThemeProvider = ({ children }) => {
-    return _jsx(ThemeUiProvider, Object.assign({ theme: theme }, { children: children }));
+    return _jsx(ThemeUIProvider, Object.assign({ theme: theme }, { children: children }));
 };

package/dist/theme/typography.d.ts

@@ -63,6 +63,7 @@ export declare const fontStyles: {
     };
 };
 export declare enum TYPOGRAPHY_TYPE {
+    PARAGRAPH_XSMALL = "paragraphXSmall",
     PARAGRAPH_SMALL = "paragraphSmall",
     PARAGRAPH_MEDIUM = "paragraphMedium",
     PARAGRAPH_LARGE = "paragraphLarge",

package/dist/theme/typography.js

@@ -74,6 +74,7 @@ export const fontStyles = {
 };
 export var TYPOGRAPHY_TYPE;
 (function (TYPOGRAPHY_TYPE) {
+    TYPOGRAPHY_TYPE["PARAGRAPH_XSMALL"] = "paragraphXSmall";
     TYPOGRAPHY_TYPE["PARAGRAPH_SMALL"] = "paragraphSmall";
     TYPOGRAPHY_TYPE["PARAGRAPH_MEDIUM"] = "paragraphMedium";
     TYPOGRAPHY_TYPE["PARAGRAPH_LARGE"] = "paragraphLarge";
@@ -89,6 +90,12 @@ export var TYPOGRAPHY_TYPE;
     TYPOGRAPHY_TYPE["HEADLINE_LARGE"] = "headlineLarge";
 })(TYPOGRAPHY_TYPE || (TYPOGRAPHY_TYPE = {}));
 export const typographyStyleMap = {
+    [TYPOGRAPHY_TYPE.PARAGRAPH_XSMALL]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.XS,
+        lineHeight: LINE_HEIGHT.NORMAL,
+        fontWeight: FONT_WEIGHT.NORMAL,
+    },
     [TYPOGRAPHY_TYPE.PARAGRAPH_SMALL]: {
         fontFamily: FONT.NORMAL,
         fontSize: FONT_SIZE.SM,

package/dist/utils/hooks/useHover.d.ts

@@ -0,0 +1,7 @@
+export declare const useHover: () => {
+    isHovered: boolean;
+    anchorElementProps: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    };
+};

package/dist/utils/hooks/useHover.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export const useHover = () => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const anchorElementProps = {
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+    };
+    return {
+        isHovered,
+        anchorElementProps,
+    };
+};

package/dist/utils/hooks/useMediaQuery.d.ts

@@ -0,0 +1,4 @@
+export declare const useMediaQuery: () => {
+    screenSize: number;
+    breakpoint: number;
+};

package/dist/utils/hooks/useMediaQuery.js

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { useTheme } from '../../theme';
+export const useMediaQuery = () => {
+    const [screenSize, setScreenSize] = useState(typeof window !== 'undefined' ? window.innerWidth : 0);
+    const [breakpoint, setBreakpoint] = useState(5);
+    const theme = useTheme();
+    const breakpoints = theme.breakpoints.map((bp) => parseInt(bp.slice(0, -2)), [theme]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const handleResize = () => {
+            const screenSize = window.innerWidth;
+            let closestBreakpoint = breakpoints.findIndex((bp) => screenSize < bp);
+            closestBreakpoint =
+                closestBreakpoint === -1 ? breakpoints.length : closestBreakpoint;
+            setBreakpoint(closestBreakpoint);
+            setScreenSize(screenSize);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return {
+        screenSize,
+        breakpoint,
+    };
+};

package/dist/utils/misc.d.ts

@@ -11,3 +11,4 @@ export declare enum KEY_CODES {
     ESCAPE = "Escape"
 }
 export declare const equals: (a: any, b: any) => boolean;
+export declare function importedDefaultComponentShim<T>(component: T): T;

package/dist/utils/misc.js

@@ -14,3 +14,15 @@ export var KEY_CODES;
     KEY_CODES["ESCAPE"] = "Escape";
 })(KEY_CODES || (KEY_CODES = {}));
 export const equals = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+// @mui/material-icons and react-datepicker dependencies exports
+// their modules as { default: Component } with is causing problems
+// when included in downstream apps. This shim prevents issues by
+// resolving ambiguity on how to handle the imports explicitly
+export function importedDefaultComponentShim(component) {
+    if (component && typeof component === 'object' && 'default' in component) {
+        return component.default;
+    }
+    else {
+        return component;
+    }
+}

package/package.json

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

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

@@ -1,2 +0,0 @@
-import { PropsWithChildren } from 'react';
-export declare const ThemeProvider: React.FC<PropsWithChildren>;

package/dist/components/providers/theme.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ThemeProvider as ThemeUiProvider } from 'theme-ui';
-import { theme } from '../../theme';
-export const ThemeProvider = ({ children }) => {
-    return _jsx(ThemeUiProvider, Object.assign({ theme: theme }, { children: children }));
-};