@ndlib/component-library 0.0.48 → 0.0.52

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, fireEvent } from '@testing-library/react';
+import { items, ExampleTabs } from './example';
+describe('TabList', () => {
+    it('renders interactive tabs', () => {
+        const { getByRole } = render(_jsx(ExampleTabs, {}));
+        expect(getByRole('tablist')).toBeInTheDocument();
+        for (const item of items) {
+            expect(getByRole('tab', { name: item.label })).toBeInTheDocument();
+        }
+        const firstTab = getByRole('tab', { name: items[0].label });
+        const secondTab = getByRole('tab', { name: items[1].label });
+        expect(firstTab).toHaveAttribute('aria-selected', 'true');
+        expect(secondTab).toHaveAttribute('aria-selected', 'false');
+        fireEvent.click(secondTab);
+        expect(firstTab).toHaveAttribute('aria-selected', 'false');
+        expect(secondTab).toHaveAttribute('aria-selected', 'true');
+    });
+});

package/dist/components/elements/TabList/example.d.ts

@@ -0,0 +1,7 @@
+type Item = {
+    id: string;
+    label: string;
+};
+export declare const items: Item[];
+export declare const ExampleTabs: () => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/elements/TabList/example.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { TabList, Tab } from '.';
+export const items = [
+    {
+        id: '1',
+        label: 'Items & Requests',
+    },
+    {
+        id: '2',
+        label: 'Courses',
+    },
+    {
+        id: '3',
+        label: 'Checkout',
+    },
+    {
+        id: '4',
+        label: 'History',
+    },
+    {
+        id: '5',
+        label: 'Preferences',
+    },
+    {
+        id: '6',
+        label: 'Reservations',
+    },
+];
+const StateManager = ({ children }) => {
+    const [selected, setSelected] = React.useState('1');
+    return _jsx(_Fragment, { children: children({ selected, setSelected }) });
+};
+export const ExampleTabs = () => (_jsx(StateManager, { children: ({ selected, setSelected }) => (_jsx(TabList, { children: items.map((item) => (_jsx(Tab, Object.assign({ onClick: () => {
+                setSelected(item.id);
+            }, selected: selected === item.id }, { children: item.label }), item.id))) })) }));

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+type TabListProps = StyledElementProps<HTMLDivElement>;
+export declare const TabList: React.FC<TabListProps>;
+type TabProps = StyledElementProps<HTMLButtonElement, {
+    selected?: boolean;
+    children: string;
+}>;
+export declare const Tab: React.FC<TabProps>;
+export {};

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

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { COLOR } from '../../../theme/colors';
+import { useUniqueId } from '../../providers/uniqueIds';
+export const TabList = (_a) => {
+    var { children, sx } = _a, props = __rest(_a, ["children", "sx"]);
+    return (_jsx("div", Object.assign({ role: "tablist", sx: Object.assign({ flexDirection: 'row' }, sx) }, props, { children: children })));
+};
+export const Tab = (_a) => {
+    var { selected, children } = _a, rest = __rest(_a, ["selected", "children"]);
+    const typographyStyles = getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_LARGE);
+    const labelId = useUniqueId('tab-label');
+    return (_jsx("button", Object.assign({ role: "tab", sx: Object.assign({ height: '3.25rem', boxSizing: 'border-box', px: 4, bg: COLOR.WHITE, color: selected ? COLOR.DARK_GRAY : COLOR.GRAY, border: 'none', borderBottom: selected ? 'solid 3px' : 'solid 1px', borderColor: selected ? COLOR.ND_BLUE_BRIGHT : COLOR.LIGHT_GRAY, cursor: 'pointer' }, typographyStyles), "aria-labelledby": labelId, "aria-selected": selected ? 'true' : 'false' }, rest, { children: _jsx("div", Object.assign({ id: labelId, sx: {
+                transform: selected ? 'scale(1.1)' : undefined,
+                ':hover': {
+                    transform: selected ? 'scale(1.1)' : 'scale(1.05)',
+                },
+            } }, { children: children })) })));
+};

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

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

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, TableColumn } from '.';
+const meta = {
+    title: 'Elements/Table',
+    component: Table,
+    tags: ['autodocs'],
+};
+export default meta;
+const data = [
+    {
+        name: 'Steve Rogers',
+        age: 100,
+        position: 'Ethics Officer',
+    },
+    {
+        name: 'Natasha Romanoff',
+        age: 35,
+        position: 'Opposition Researcher',
+    },
+    {
+        name: 'Thor',
+        age: 1500,
+        position: 'VP of Thunder',
+    },
+    {
+        name: 'Peter Parker',
+        age: 18,
+        position: 'Web Crawling Expert',
+    },
+    {
+        name: 'Kate Bishop',
+        age: 22,
+        position: 'Trust Fund Recipient',
+    },
+];
+export const Default = {
+    render: () => (_jsxs(Table, Object.assign({ data: data, alternateRowColor: true }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
+                    width: '160px',
+                } }), _jsx(TableColumn, Object.assign({ header: "Age", sx: {
+                    width: '100px',
+                } }, { children: (row) => row.age })), _jsx(TableColumn, Object.assign({ header: "Occupation" }, { children: (row) => row.position }))] }))),
+};

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

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

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { Table, TableColumn } from '.';
+const data = [
+    {
+        col1: 'Cell 1-1',
+        col2: 'Cell 1-2',
+        col3: 'Cell 1-3',
+    },
+    {
+        col1: 'Cell 2-1',
+        col2: 'Cell 2-2',
+        col3: 'Cell 2-3',
+    },
+];
+export const testExample = (_jsxs(Table, Object.assign({ data: data }, { children: [_jsx(TableColumn, { header: "Column 1", dataKey: "col1" }), _jsx(TableColumn, Object.assign({ header: "Column 2" }, { children: (row) => row.col2 })), _jsx(TableColumn, { dataKey: "col3", header: _jsx("div", { children: "Column 3" }) })] })));
+describe('Table', () => {
+    it('renders all headers and cells', () => {
+        const { getByText } = render(testExample);
+        const headers = ['Column 1', 'Column 2', 'Column 3'];
+        const cells = [
+            'Cell 1-1',
+            'Cell 1-2',
+            'Cell 1-3',
+            'Cell 2-1',
+            'Cell 2-2',
+            'Cell 2-3',
+        ];
+        headers.forEach((header) => {
+            expect(getByText(header)).toBeInTheDocument();
+        });
+        cells.forEach((cell) => {
+            expect(getByText(cell)).toBeInTheDocument();
+        });
+    });
+});

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { StyledElementProps, StylesProp } from '../../../theme';
+type ColumnRenderFn<RowData> = (data: RowData) => React.ReactNode;
+type ColumnProps<RowData extends object> = {
+    header: string | React.ReactNode;
+    dataKey?: keyof RowData;
+    headerStyles?: StylesProp;
+    align?: 'left' | 'center' | 'right';
+    alignHeader?: 'left' | 'center' | 'right';
+    children?: ColumnRenderFn<RowData>;
+    sx?: StylesProp;
+};
+type TableProps<RowData> = StyledElementProps<HTMLTableElement, {
+    data: RowData[];
+    children: JSX.Element[];
+    cellStyles?: StylesProp;
+    alternateRowColor?: boolean;
+    showRowDividers?: boolean;
+    showColumnDividers?: boolean;
+}>;
+export declare function TableColumn<RowData extends object>(props: ColumnProps<RowData>): null;
+export declare function Table<RowData extends object>(props: TableProps<RowData>): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { useMemo } from 'react';
+import { COLOR } from '../../../theme/colors';
+import { useEnvironment } from '../../providers/env';
+import { TYPOGRAPHY_TYPE, typographyStyleMap } from '../../../theme/typography';
+const useColumnSpec = (children) => {
+    const columnList = JSON.stringify(children.map((child) => child.props.header));
+    return useMemo(() => {
+        return children.map((child) => child.props);
+    }, [columnList]);
+};
+export function TableColumn(props) {
+    const { flagInDevelopment } = useEnvironment();
+    flagInDevelopment('TableColumn should not be used outside of Table component');
+    console.log('We offer this log to you in reverence, oh compiler gods', props);
+    return null;
+}
+export function Table(props) {
+    const { role, data, alternateRowColor = true, cellStyles, sx, children, showRowDividers = true, showColumnDividers = false, } = props;
+    const cellTypographyStyles = typographyStyleMap[TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM];
+    const headerTypographyStyles = typographyStyleMap[TYPOGRAPHY_TYPE.CONTROL_MEDIUM];
+    const columnSpec = useColumnSpec(children);
+    const getCellStyles = (params) => {
+        const { columnProps, rowIndex, columnIndex } = params;
+        const isLastColumn = columnIndex === columnSpec.length - 1;
+        const isLastRow = rowIndex === data.length - 1;
+        const cellAlign = columnProps.align || 'left';
+        const styles = Object.assign({ bg: alternateRowColor && rowIndex % 2 === 1
+                ? COLOR.EXTRA_EXTRA_LIGHT_GRAY
+                : COLOR.WHITE, p: 3, borderBottom: showRowDividers && !isLastRow ? '1px solid' : 'none', borderRight: showColumnDividers && !isLastColumn ? '1px solid' : 'none', borderColor: COLOR.LIGHT_GRAY, textAlign: cellAlign }, cellTypographyStyles);
+        return Object.assign(Object.assign(Object.assign({}, styles), cellStyles), columnProps.sx);
+    };
+    return (_jsxs("table", Object.assign({ role: role, sx: sx }, { children: [_jsx("thead", Object.assign({ role: "rowgroup" }, { children: _jsx("tr", { children: columnSpec.map((column, i) => {
+                        const isLastColumn = i === columnSpec.length - 1;
+                        return (_jsx("th", Object.assign({ role: "columnheader", sx: Object.assign(Object.assign({ textAlign: column.alignHeader || column.align || 'left', borderBottom: '1px solid', borderRight: showColumnDividers && !isLastColumn ? '1px solid' : 'none', borderColor: COLOR.LIGHT_GRAY, px: 3, pb: 1 }, headerTypographyStyles), column.headerStyles) }, { children: column.header }), i));
+                    }) }) })), _jsx("tbody", Object.assign({ role: "rowgroup" }, { children: data.map((rowData, rowIndex) => {
+                    return (_jsx("tr", Object.assign({ role: "row" }, { children: columnSpec.map((column, columnIndex) => {
+                            const { children, dataKey } = column;
+                            const cellStyles = getCellStyles({
+                                columnProps: column,
+                                rowIndex,
+                                columnIndex,
+                            });
+                            return (_jsx("td", Object.assign({ sx: cellStyles }, { children: _jsxs(_Fragment, { children: [dataKey ? rowData[dataKey] : null, !dataKey && children && children(rowData)] }) }), columnIndex));
+                        }) }), rowIndex));
+                }) }))] })));
+}

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

@@ -1,4 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 import { StyledElementProps } from '../../../theme';
 export type BoxProps = StyledElementProps<HTMLDivElement>;
-export declare const Box: React.FC<BoxProps>;
+export declare const Box: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesProp | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & object & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,3 @@
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-export const Box = (props) => {
-    return _jsx("div", Object.assign({}, props));
-};
+import React from 'react';
+export const Box = React.forwardRef((props, ref) => (_jsx("div", Object.assign({}, props, { ref: ref }))));

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

@@ -1,6 +1,8 @@
-/// <reference types="react" />
-import { StyledElementProps } from '../../../theme';
+import React from 'react';
 import { FlexHelperProps } from './Row';
-type ColumnProps = StyledElementProps<HTMLDivElement, FlexHelperProps>;
-export declare const Column: React.FC<ColumnProps>;
-export {};
+export declare const Column: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesProp | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & FlexHelperProps & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -10,9 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import React from 'react';
 import { convertFlexHelperProps } from './Row';
-export const Column = (_a) => {
+export const Column = React.forwardRef((_a, ref) => {
     var { sx, children } = _a, rest = __rest(_a, ["sx", "children"]);
     const flexStyles = convertFlexHelperProps(rest);
-    return (_jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { display: 'flex', flexDirection: 'column' }) }, { children: children })));
-};
+    return (_jsx("div", Object.assign({ ref: ref }, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { display: 'flex', flexDirection: 'column' }) }, { children: children })));
+});

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { CSSProperties, ThemeUICSSProperties } from 'theme-ui';
-import { StyledElementProps } from '../../../theme';
+import React from 'react';
 export declare const convertFlexHelperProps: (props: FlexHelperProps) => ThemeUICSSProperties;
 export type FlexHelperProps = {
     grow?: number;
@@ -11,8 +10,11 @@ export type FlexHelperProps = {
     justify?: CSSProperties['justifyContent'];
     centered?: boolean;
 };
-type RowProps = StyledElementProps<HTMLDivElement, FlexHelperProps & {
-    breakpoint?: number;
-}>;
-export declare const Row: React.FC<RowProps>;
-export {};
+export declare const Row: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesProp | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & FlexHelperProps & {
+    breakpoint?: number | undefined;
+} & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

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 React from 'react';
 export const convertFlexHelperProps = (props) => {
     const styleObject = {};
     if (props.grow) {
@@ -36,7 +37,7 @@ export const convertFlexHelperProps = (props) => {
     }
     return styleObject;
 };
-export const Row = (_a) => {
+export const Row = React.forwardRef((_a, ref) => {
     var { sx, children, breakpoint: breakpointParam } = _a, rest = __rest(_a, ["sx", "children", "breakpoint"]);
     const flexStyles = convertFlexHelperProps(rest);
     let flexDirection = 'row';
@@ -47,5 +48,5 @@ export const Row = (_a) => {
         }
         flexDirection.push('row');
     }
-    return (_jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { flexDirection, display: 'flex' }) }, { children: children })));
-};
+    return (_jsx("div", Object.assign({}, rest, { ref: ref, sx: Object.assign(Object.assign(Object.assign({}, flexStyles), sx), { flexDirection, display: 'flex' }) }, { children: children })));
+});

package/dist/components/providers/menu.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { useEnvironment } from './env';
 import { KEY_CODES, equals } from '../../utils/misc';
-import { useUniqueHtmlId } from '../../utils/hooks/useUniqueHtmlId';
 import { useCheckMidClick } from '../../utils/hooks/useCheckMidClick';
+import { useUniqueId } from './uniqueIds';
 export var MENU_ACTION_TYPE;
 (function (MENU_ACTION_TYPE) {
     MENU_ACTION_TYPE["SUBMENU"] = "SUBMENU";
@@ -41,14 +41,14 @@ const inactiveStyles = {
 };
 export const MenuProvider = ({ menu, children, }) => {
     const { flagInDevelopment } = useEnvironment();
-    const salt = useUniqueHtmlId();
+    const menuId = useUniqueId('hcl-menu');
     const { isMidClick, elementProps: checkMidclickProps } = useCheckMidClick();
     const [usingKeyboard, setUsingKeyboard] = useState(false);
     const closeOnBlurTimeout = React.useRef();
     const initialPath = React.useMemo(() => [menu.items[0].id], [menu]);
     const [activePath, setActivePath] = useState(initialPath);
     const [isOpen, setIsOpen] = useState(false);
-    const getItemId = React.useCallback((path) => `menu-${salt}-item-${path.join('-')}`, [salt]);
+    const getItemId = React.useCallback((path) => `${menuId}-item-${path.join('-')}`, [menuId]);
     useEffect(() => {
         if (activePath && isOpen) {
             const activeChild = window.document.getElementById(getItemId(activePath));

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+type SnackBarMessage = {
+    message: string;
+    content?: JSX.Element;
+    id?: string;
+};
+type SendMessageOptions = {
+    timeout?: number;
+    wipePrevious?: boolean;
+};
+type SnackBarMessageWithId = Omit<SnackBarMessage, 'id'> & {
+    id: string;
+};
+type AddMessage = (message: SnackBarMessage, options?: SendMessageOptions) => void;
+type SnackBarContextType = {
+    addMessage: AddMessage;
+    removeMessage: (id: string) => void;
+    messages: SnackBarMessageWithId[];
+    previousMessageCount: number;
+};
+export declare const SnackBarProvider: React.FC<React.PropsWithChildren>;
+export declare const useSnackBar: () => SnackBarContextType;
+export {};

package/dist/components/providers/snackBar.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState, } from 'react';
+const DEFAULT_TIMEOUT = 10000;
+const SnackBarContext = createContext({
+    addMessage: () => { },
+    removeMessage: () => { },
+    previousMessageCount: 0,
+    messages: [],
+});
+export const SnackBarProvider = ({ children, }) => {
+    const [messages, setMessages] = useState([]);
+    const removeMessageTimeouts = useRef([]);
+    const previousMessageCount = useRef(0);
+    const removeMessage = useCallback((id) => {
+        setMessages((messages) => {
+            previousMessageCount.current = messages.length;
+            return messages.filter((m) => m.id !== id);
+        });
+    }, []);
+    const addMessage = useCallback((message, options = {}) => {
+        const newRandomId = Math.random().toString(36).substring(7);
+        setMessages((messages) => {
+            previousMessageCount.current = options.wipePrevious
+                ? 0
+                : messages.length;
+            let newMessages = options.wipePrevious ? [] : [...messages];
+            newMessages = newMessages.filter((m) => m.id !== message.id);
+            newMessages.push(Object.assign(Object.assign({}, message), { id: message.id || newRandomId }));
+            if (newMessages.length > 3) {
+                newMessages.shift();
+            }
+            return newMessages;
+        });
+        const removeMessageTimeout = setTimeout(() => {
+            removeMessage(newRandomId);
+        }, options.timeout || DEFAULT_TIMEOUT);
+        removeMessageTimeouts.current.push(removeMessageTimeout);
+    }, [removeMessage]);
+    useEffect(() => {
+        return () => {
+            removeMessageTimeouts.current.forEach((timeout) => clearTimeout(timeout));
+        };
+    }, []);
+    return (_jsx(SnackBarContext.Provider, Object.assign({ value: {
+            messages,
+            removeMessage,
+            previousMessageCount: previousMessageCount.current,
+            addMessage,
+        } }, { children: children })));
+};
+export const useSnackBar = () => {
+    return useContext(SnackBarContext);
+};

package/dist/components/providers/ui.js

@@ -7,7 +7,9 @@ import { FontLoader } from '../../FontLoader';
 import { GlobalStyles } from '../../theme/GlobalStyles';
 import { DialogsProvider } from './dialogs';
 import { MediaSizeProvider } from './media';
+import { SnackBarProvider } from './snackBar';
+import { UniqueIdProvider } from './uniqueIds';
 export const UiProvider = ({ env, components, alertsConfig, children, includeTheme = true, loadFonts, loadGlobalStyles, }) => {
-    const core = (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(MediaSizeProvider, { children: _jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(DialogsProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) })) }), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {})] })));
+    const core = (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(MediaSizeProvider, { children: _jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(UniqueIdProvider, { children: _jsx(SnackBarProvider, { children: _jsx(DialogsProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) }) }) })) }), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {})] })));
     return includeTheme ? _jsx(ThemeProvider, { children: core }) : core;
 };

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const UniqueIdProvider: React.FC<React.PropsWithChildren>;
+export declare const useUniqueId: (prefix: string) => string;

package/dist/components/providers/uniqueIds.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useRef } from 'react';
+const UniqueIdContext = createContext({});
+export const UniqueIdProvider = ({ children, }) => {
+    const countIndexRef = useRef({});
+    return (_jsx(UniqueIdContext.Provider, Object.assign({ value: countIndexRef.current }, { children: children })));
+};
+export const useUniqueId = (prefix) => {
+    const countIndex = useContext(UniqueIdContext);
+    return useMemo(() => {
+        var _a;
+        const idForPrefix = ((_a = countIndex[prefix]) === null || _a === void 0 ? void 0 : _a.count) || 1;
+        if (!countIndex[prefix]) {
+            countIndex[prefix] = {
+                count: 2,
+            };
+        }
+        else {
+            countIndex[prefix].count += 1;
+        }
+        return `${prefix}-${idForPrefix}`;
+    }, []);
+};

package/dist/components/providers/uniqueIds.test.d.ts

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

package/dist/components/providers/uniqueIds.test.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { UniqueIdProvider, useUniqueId } from './uniqueIds';
+const ExampleInner = () => {
+    const uniqueId1 = useUniqueId('test-1');
+    const uniqueId2 = useUniqueId('test-1');
+    const uniqueId3 = useUniqueId('test-2');
+    return (_jsxs(_Fragment, { children: [_jsx("div", { children: uniqueId1 }), _jsx("div", { children: uniqueId2 }), _jsx("div", { children: uniqueId3 })] }));
+};
+const ExampleOuter = () => {
+    return (_jsxs(UniqueIdProvider, { children: [_jsx(ExampleInner, {}), _jsx(ExampleInner, {}), _jsx(ExampleInner, {})] }));
+};
+describe('UniqueIdProvider', () => {
+    it('should generate unique ids', () => {
+        const { getByText } = render(_jsx(ExampleOuter, {}));
+        expect(getByText('test-1-1')).toBeInTheDocument();
+        expect(getByText('test-1-2')).toBeInTheDocument();
+        expect(getByText('test-2-1')).toBeInTheDocument();
+        expect(getByText('test-1-3')).toBeInTheDocument();
+        expect(getByText('test-1-4')).toBeInTheDocument();
+        expect(getByText('test-2-2')).toBeInTheDocument();
+        expect(getByText('test-1-5')).toBeInTheDocument();
+        expect(getByText('test-1-6')).toBeInTheDocument();
+        expect(getByText('test-2-3')).toBeInTheDocument();
+    });
+});

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { theme, ThemeProvider, useTheme } from './theme';
+export type { StylesProp } 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';
@@ -28,14 +29,21 @@ export { ReadMore } from './components/elements/text/ReadMore';
 export { Icon } from './components/elements/Icon';
 export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
+export { Table, TableColumn } from './components/elements/Table';
+export { TabList, Tab } from './components/elements/TabList';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
+export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { Modal } from './components/composites/Modal';
+export { DragDropList, DragHandle } from './components/composites/DragDropList';
+export { Seo } from './components/composites/Seo';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';
+export { SnackBarProvider, useSnackBar } from './components/providers/snackBar';
 export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';
 export { MediaSizeProvider, useMediaQuery } from './components/providers/media';
 export { DialogsProvider, useDialog } from './components/providers/dialogs';
+export { useUniqueId } from './components/providers/uniqueIds';
 export { useHover } from './utils/hooks/useHover';

package/dist/index.js

@@ -28,14 +28,21 @@ export { ReadMore } from './components/elements/text/ReadMore';
 export { Icon } from './components/elements/Icon';
 export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
+export { Table, TableColumn } from './components/elements/Table';
+export { TabList, Tab } from './components/elements/TabList';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
+export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { Modal } from './components/composites/Modal';
+export { DragDropList, DragHandle } from './components/composites/DragDropList';
+export { Seo } from './components/composites/Seo';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';
+export { SnackBarProvider, useSnackBar } from './components/providers/snackBar';
 export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';
 export { MediaSizeProvider, useMediaQuery } from './components/providers/media';
 export { DialogsProvider, useDialog } from './components/providers/dialogs';
+export { useUniqueId } from './components/providers/uniqueIds';
 export { useHover } from './utils/hooks/useHover';

package/dist/theme/GlobalStyles.js

@@ -156,11 +156,10 @@ const globalStyles = css `
   @font-face {
     font-family: GPCMed;
     font-display: swap;
-    src: url('https://static.nd.edu/fonts/gp-min/gpc-medium.woff2')
-        format('woff2'),
-      url('https://static.nd.edu/fonts/gp-min/gpc-medium.woff') format('woff'),
-      url('https://static.nd.edu/fonts/gp-min/gpc-medium.ttf')
-        format('truetype');
+    url('https://static.nd.edu/fonts/gp-min/gpc-medium.woff2') format('woff2'),
+    url('https://static.nd.edu/fonts/gp-min/gpc-medium.woff') format('woff'),
+    url('https://static.nd.edu/fonts/gp-min/gpc-medium.ttf')
+    format('truetype');
   }
 `;
 export const GlobalStyles = () => {

package/dist/theme/custom.d.ts

@@ -5,7 +5,7 @@ export declare enum BOX_SHADOW {
 }
 export declare enum Z_INDEX {
     NORMAL = 1,
-    LABEL = 2,
-    DROPDOWN = 3,
+    ELEVATED = 2,
+    DIALOG = 3,
     MODAL = 4
 }