@ndlib/component-library 0.0.48 → 0.0.52

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

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

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

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DragDropList, DragHandle } from './index';
+import React from 'react';
+import { Paragraph } from '../../elements/text/Paragraph';
+const meta = {
+    title: 'Composites/DragDropList',
+    component: DragDropList,
+    tags: ['autodocs'],
+};
+export default meta;
+const _items = [
+    {
+        id: '1',
+        label: 'Foo',
+        accessibleLabel: 'Foo',
+    },
+    {
+        id: '2',
+        label: 'Bar',
+        accessibleLabel: 'Bar',
+    },
+];
+const StateManager = ({ children }) => {
+    const [items, setItems] = React.useState(_items);
+    return _jsx(_Fragment, { children: children({ items, setItems }) });
+};
+export const Default = {
+    render: () => (_jsx(StateManager, { children: ({ items, setItems }) => (_jsx(DragDropList, Object.assign({ items: items, onReorder: ({ reorderedList }) => setItems(reorderedList) }, { children: (item) => (_jsxs(_Fragment, { children: [_jsx(DragHandle, {}), _jsx(Paragraph, Object.assign({ sx: { ml: 2 } }, { children: item.label }))] })) }))) })),
+};
+export const Disabled = {
+    render: () => (_jsx(DragDropList, Object.assign({ disabled: true, items: _items, onReorder: () => { } }, { children: (item) => (_jsxs(_Fragment, { children: [_jsx(DragHandle, {}), _jsx(Paragraph, Object.assign({ sx: { ml: 2 } }, { children: item.label }))] })) }))),
+};

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { DropResult } from 'react-beautiful-dnd';
+import { StylesProp } from '../../../theme';
+import { ButtonProps } from '../../elements/Button';
+type DraggableItem = {
+    accessibleLabel: string;
+};
+type DragDropListProps<Item extends DraggableItem> = {
+    onReorder: (params: {
+        reorderedList: Item[];
+        dropEvent: DropResult;
+    }) => void;
+    items: Item[];
+    itemIdKey?: keyof Item;
+    wrapperStyles?: StylesProp;
+    itemStyles?: StylesProp;
+    dragItemsDirectly?: boolean;
+    disabled?: boolean;
+    children: (item: Item) => React.ReactNode;
+};
+export declare const DragHandle: React.FC<ButtonProps>;
+export declare function DragDropList<Item extends DraggableItem>({ items, itemIdKey, wrapperStyles, itemStyles, children: renderChild, onReorder, disabled, dragItemsDirectly, }: DragDropListProps<Item>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,46 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { DragDropContext, Droppable, Draggable, } from 'react-beautiful-dnd';
+import DragIndicator from '@mui/icons-material/DragIndicator';
+import { BUTTON_TYPE, Button } from '../../elements/Button';
+import { Column } from '../../elements/layout/Column';
+import { Row } from '../../elements/layout/Row';
+import { useUniqueId } from '../../providers/uniqueIds';
+export const DragHandle = (_a) => {
+    var { sx } = _a, props = __rest(_a, ["sx"]);
+    return (_jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, primaryIcon: DragIndicator, disableFocusStyles: true, sx: Object.assign({ cursor: 'inherit' }, sx) }, props)));
+};
+export function DragDropList({ items, itemIdKey = 'id', wrapperStyles, itemStyles, children: renderChild, onReorder, disabled, dragItemsDirectly = false, }) {
+    const id = useUniqueId('dnd-list');
+    return (_jsx(DragDropContext, Object.assign({ onDragStart: (start, provided) => {
+            const selectedItem = items.find((item) => String(item[itemIdKey]) === start.draggableId);
+            provided.announce(`Selected item: ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.accessibleLabel}`);
+        }, onDragEnd: (e) => {
+            if (e.destination &&
+                e.source &&
+                e.destination.index !== e.source.index) {
+                const reordered = Array.from(items);
+                const [removed] = reordered.splice(e.source.index, 1);
+                reordered.splice(e.destination.index, 0, removed);
+                onReorder({
+                    reorderedList: reordered,
+                    dropEvent: e,
+                });
+            }
+        } }, { children: _jsx(Droppable, Object.assign({ droppableId: id }, { children: (provided) => (_jsx(Column, Object.assign({}, provided.droppableProps, { sx: wrapperStyles, ref: provided.innerRef }, { children: _jsx(_Fragment, { children: items.map((item, index) => (_jsx(Draggable, Object.assign({ draggableId: String(item[itemIdKey]), isDragDisabled: disabled, index: index }, { children: (provided) => {
+                            return (_jsx(Row, Object.assign({ sx: {
+                                    alignItems: 'center',
+                                    itemStyles,
+                                }, ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { "aria-describedby": `item-${index}` }, (dragItemsDirectly ? provided.dragHandleProps : {}), { children: _jsx(Row, Object.assign({ sx: { mt: 1 }, id: `item-${index}` }, { children: renderChild(item) })) })));
+                        } }), String(item[itemIdKey])))) }) }))) })) })));
+}

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

@@ -13,16 +13,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { autoPlacement, offset, size, useFloating } from '@floating-ui/react';
 import { ListBox } from '../../elements/ListBox';
-import { useUniqueHtmlId } from '../../../utils/hooks/useUniqueHtmlId';
 import { Link } from '../../elements/Link';
 import { Box } from '../../elements/layout/Box';
 import { useComponentConfig } from '../../providers/componentConfig';
+import { useUniqueId } from '../../providers/uniqueIds';
 export const DropdownLinks = (_a) => {
     var { children, options: optionsParam, renderOption: renderOptionParam, openNewTab, role = 'navigation' } = _a, rest = __rest(_a, ["children", "options", "renderOption", "openNewTab", "role"]);
     const [isOpen, setIsOpen] = useState(false);
     const [dropdownMinWidth, setDropdownMinWidth] = useState('0px');
-    const listboxId = useUniqueHtmlId('dropdown-links');
-    const anchorId = useUniqueHtmlId('dropdown-links-anchor');
+    const listboxId = useUniqueId('dropdown-links');
+    const anchorId = useUniqueId('dropdown-links-anchor');
     const { navigate } = useComponentConfig().link;
     const options = optionsParam.map((option) => (Object.assign(Object.assign({}, option), { onClick: () => {
             if (option.onClick) {

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

@@ -14,7 +14,7 @@ const ModalExample = () => {
     const modalId = 'modal-example';
     const { open, close, state } = useDialog(modalId);
     const theme = useTheme();
-    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: open, sx: { position: 'relative', zIndex: theme.zIndex.DROPDOWN } }, { children: "Open Modal" })), _jsx(Modal, Object.assign({ isOpen: state.isOpen, heading: "Heading", close: close, actions: [
+    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: open, sx: { position: 'relative', zIndex: theme.zIndex.DIALOG } }, { children: "Open Modal" })), _jsx(Modal, Object.assign({ isOpen: state.isOpen, heading: "Heading", close: close, actions: [
                     {
                         label: 'Secondary',
                         isPrimary: false,

package/dist/components/composites/Seo/SeoDataDisplay/index.d.ts

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

package/dist/components/composites/Seo/SeoDataDisplay/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactDOMServer from 'react-dom/server';
+import pretty from 'pretty';
+import { Seo } from '../index';
+export const SeoDataDisplay = () => {
+    const seoHtml = ReactDOMServer.renderToString(_jsx(Seo, {}));
+    return (_jsx("code", { children: _jsx("pre", { children: pretty(seoHtml) }) }));
+};
+export default SeoDataDisplay;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface SeoProps {
+    title?: string;
+    description?: string;
+    image?: string;
+    pathname?: string;
+    nofollow?: boolean;
+    noindex?: boolean;
+}
+export declare const Seo: React.FC<SeoProps>;
+export default Seo;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSiteMetadata } from './useSiteMetadata';
+export const Seo = ({ title, description, image, nofollow, noindex, }) => {
+    const { title: defaultTitle, description: defaultDescription, image: defaultImage, siteUrl, twitterUsername, nofollow: defaultNoindex, noindex: defaultNofollow, } = useSiteMetadata();
+    const seo = {
+        title: title || defaultTitle,
+        description: description || defaultDescription,
+        image: image ? siteUrl + image : siteUrl + defaultImage,
+        url: siteUrl + location.pathname || '',
+        twitterUsername,
+        nofollow: nofollow || defaultNofollow,
+        noindex: noindex || defaultNoindex,
+    };
+    return (_jsxs(_Fragment, { children: [seo.title ? _jsx("title", Object.assign({ "data-testid": "seo-title" }, { children: seo.title })) : null, seo.title ? (_jsx("meta", { "data-testid": "seo-twitter-title", name: "twitter:title", content: seo.title })) : null, seo.title ? (_jsx("meta", { "data-testid": "seo-og-title", property: "og:title", content: seo.title })) : null, seo.url ? (_jsx("meta", { "data-testid": "seo-twitter-url", name: "twitter:url", content: seo.url })) : null, seo.url ? (_jsx("meta", { "data-testid": "seo-og-url", property: "og:url", content: seo.url })) : null, seo.description ? (_jsx("meta", { "data-testid": "seo-twitter-description", name: "twitter:description", content: seo.description })) : null, seo.description ? (_jsx("meta", { "data-testid": "seo-og-description", property: "og:description", content: seo.description })) : null, seo.image ? (_jsx("meta", { "data-testid": "seo-twitter-image", name: "twitter:image", content: seo.image })) : null, seo.image ? (_jsx("meta", { "data-testid": "seo-og-image", name: "og:image", content: seo.image })) : null, seo.twitterUsername ? (_jsx("meta", { "data-testid": "seo-twitter-creator", name: "twitter:creator", content: seo.twitterUsername })) : null, seo.nofollow ? (_jsx("meta", { "data-testid": "seo-nofollow", name: "robots", content: "nofollow" })) : null, seo.noindex ? (_jsx("meta", { "data-testid": "seo-noindex", name: "robots", content: "noindex" })) : null, _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" })] }));
+};
+export default Seo;

package/dist/components/composites/Seo/seo.stories.d.ts

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

package/dist/components/composites/Seo/seo.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import SeoDataDisplay from './SeoDataDisplay';
+import Seo from './index';
+const meta = {
+    title: 'Composites/Seo',
+    component: Seo,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(_Fragment, { children: _jsx(SeoDataDisplay, {}) })),
+};

package/dist/components/composites/Seo/seo.test.d.ts

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

package/dist/components/composites/Seo/seo.test.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { screen } from '@testing-library/dom';
+import { Seo } from './index';
+const title = 'Component Library';
+const description = 'Component Library for the Hesburgh Libraries';
+const image = '/image.png';
+const nofollow = true;
+const noindex = true;
+describe('Seo', () => {
+    it('renders meta tag for title', () => {
+        render(_jsx(Seo, { title: title }));
+        const element = screen.getByTestId('seo-title');
+        expect(element).toContainHTML('Component Library');
+    });
+    it('renders meta tag for twitter title', () => {
+        render(_jsx(Seo, { title: title }));
+        const element = screen.getByTestId('seo-twitter-title');
+        expect(element).toContainHTML('Component Library');
+    });
+    it('renders meta tag for open graph title', () => {
+        render(_jsx(Seo, { title: title }));
+        const element = screen.getByTestId('seo-og-title');
+        expect(element).toContainHTML('Component Library');
+    });
+    it('renders meta tag for twitter description', () => {
+        render(_jsx(Seo, { description: description }));
+        const element = screen.getByTestId('seo-twitter-description');
+        expect(element).toContainHTML('Component Library for the Hesburgh Libraries');
+    });
+    it('renders meta tag for open graph description', () => {
+        render(_jsx(Seo, { description: description }));
+        const element = screen.getByTestId('seo-og-description');
+        expect(element).toContainHTML('Component Library for the Hesburgh Libraries');
+    });
+    it('renders meta tag for twitter image', () => {
+        render(_jsx(Seo, { image: image }));
+        const element = screen.getByTestId('seo-twitter-image');
+        expect(element).toContainHTML('https://www.library.nd.edu/image.png');
+    });
+    it('renders meta tag for og image', () => {
+        render(_jsx(Seo, { image: image }));
+        const element = screen.getByTestId('seo-og-image');
+        expect(element).toContainHTML('https://www.library.nd.edu/image.png');
+    });
+    it('renders meta tag for nofollow', () => {
+        render(_jsx(Seo, { nofollow: nofollow }));
+        const element = screen.getByTestId('seo-nofollow');
+        expect(element).toContainHTML('nofollow');
+    });
+    it('renders meta tag for noindex', () => {
+        render(_jsx(Seo, { noindex: noindex }));
+        const element = screen.getByTestId('seo-noindex');
+        expect(element).toContainHTML('noindex');
+    });
+});

package/dist/components/composites/Seo/useSiteMetadata.d.ts

@@ -0,0 +1,9 @@
+export declare const useSiteMetadata: () => {
+    title: string;
+    image: string;
+    description: string;
+    twitterUsername: string;
+    siteUrl: string;
+    nofollow: boolean;
+    noindex: boolean;
+};

package/dist/components/composites/Seo/useSiteMetadata.js

@@ -0,0 +1,16 @@
+export const useSiteMetadata = () => {
+    const data = {
+        site: {
+            siteMetadata: {
+                title: 'Hesburgh Component Library',
+                image: '/images/fakeimage.png',
+                description: 'Component library for the Hesburgh Libraries',
+                twitterUsername: 'hlibraries',
+                siteUrl: 'https://www.library.nd.edu',
+                nofollow: false,
+                noindex: false,
+            },
+        },
+    };
+    return data.site.siteMetadata;
+};

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SnackBar } from './';
+import { BasicExample, ReplaceMessageExample, WipeMessagesExample, } from './examples';
+const meta = {
+    title: 'Composites/SnackBar',
+    component: SnackBar,
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(BasicExample, {}),
+    args: {},
+};
+export const ReplaceMessage = {
+    render: () => _jsx(ReplaceMessageExample, {}),
+    args: {},
+};
+export const WipeMessages = {
+    render: () => _jsx(WipeMessagesExample, {}),
+    args: {},
+};

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

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

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, fireEvent, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import { render } from '../../../utils/test';
+import { BasicExample, ReplaceMessageExample, WipeMessagesExample, } from './examples';
+vi.useFakeTimers();
+describe('SnackBar', () => {
+    it('supports adding messages', () => {
+        const { getByText } = render(_jsx(BasicExample, {}));
+        expect(() => getByText('Message 1')).toThrow();
+        const addButton = getByText('Add Message');
+        act(() => {
+            fireEvent.click(addButton);
+        });
+        expect(getByText('Message 1')).toBeInTheDocument();
+        act(() => {
+            fireEvent.click(addButton);
+        });
+        expect(getByText('Message 1')).toBeInTheDocument();
+        expect(getByText('Message 2')).toBeInTheDocument();
+        act(() => {
+            vi.runAllTimers();
+        });
+        waitFor(() => {
+            expect(() => getByText('Message 1')).toThrow();
+            expect(() => getByText('Message 2')).toThrow();
+        });
+    });
+    it('supports replacing messages', () => {
+        const { getByText } = render(_jsx(ReplaceMessageExample, {}));
+        expect(() => getByText('Message 1')).toThrow();
+        const addButton = getByText('Add Message');
+        act(() => {
+            fireEvent.click(addButton);
+        });
+        expect(getByText('Message 1')).toBeInTheDocument();
+        act(() => {
+            fireEvent.click(addButton);
+        });
+        expect(() => getByText('Message 1')).toThrow();
+        expect(getByText('Message 2')).toBeInTheDocument();
+        act(() => {
+            vi.runAllTimers();
+        });
+        waitFor(() => {
+            expect(() => getByText('Message 2')).toThrow();
+        });
+    });
+    it('supports wiping messages', () => {
+        const { getByText } = render(_jsx(WipeMessagesExample, {}));
+        expect(() => getByText('Message 1')).toThrow();
+        const addButton = getByText('Add Message');
+        act(() => {
+            fireEvent.click(addButton);
+        });
+        act(() => {
+            fireEvent.click(addButton);
+        });
+        expect(getByText('Message 1')).toBeInTheDocument();
+        expect(getByText('Message 2')).toBeInTheDocument();
+        const wipeButton = getByText('Wipe and Add');
+        act(() => {
+            fireEvent.click(wipeButton);
+        });
+        expect(() => getByText('Message 1')).toThrow();
+        expect(() => getByText('Message 2')).toThrow();
+        expect(getByText('Message 3')).toBeInTheDocument();
+        act(() => {
+            vi.runAllTimers();
+        });
+        waitFor(() => {
+            expect(() => getByText('Message 3')).toThrow();
+        });
+    });
+});

package/dist/components/composites/SnackBar/examples.d.ts

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

package/dist/components/composites/SnackBar/examples.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useSnackBar } from '../../providers/snackBar';
+import { Row } from '../../elements/layout/Row';
+import { Button } from '../../elements/Button';
+import { SnackBar } from '.';
+export const BasicExample = () => {
+    const { addMessage } = useSnackBar();
+    const [messageCount, setMessageCount] = useState(1);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: () => {
+                    setMessageCount(messageCount + 1);
+                    addMessage({ message: `Message ${messageCount}` });
+                } }, { children: "Add Message" })), _jsx(SnackBar, {})] }));
+};
+export const ReplaceMessageExample = () => {
+    const { addMessage } = useSnackBar();
+    const [messageCount, setMessageCount] = useState(1);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: () => {
+                    setMessageCount(messageCount + 1);
+                    addMessage({ message: `Message ${messageCount}`, id: 'same-id' });
+                } }, { children: "Add Message" })), _jsx(SnackBar, {})] }));
+};
+export const WipeMessagesExample = () => {
+    const { addMessage } = useSnackBar();
+    const [messageCount, setMessageCount] = useState(1);
+    return (_jsxs(Row, { children: [_jsx(Button, Object.assign({ onClick: () => {
+                    setMessageCount((count) => count + 1);
+                    addMessage({ message: `Message ${messageCount}` });
+                }, sx: { mr: 1 } }, { children: "Add Message" })), _jsx(Button, Object.assign({ onClick: () => {
+                    setMessageCount((count) => count + 1);
+                    addMessage({ message: `Message ${messageCount}` }, {
+                        wipePrevious: true,
+                    });
+                } }, { children: "Wipe and Add" })), _jsx(SnackBar, {})] }));
+};

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

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

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { keyframes } from '@emotion/react';
+import { COLOR } from '../../../theme/colors';
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { BUTTON_TYPE, Button } from '../../elements/Button';
+import { Box } from '../../elements/layout/Box';
+import { Column } from '../../elements/layout/Column';
+import { Row } from '../../elements/layout/Row';
+import { useSnackBar } from '../../providers/snackBar';
+import CloseIcon from '@mui/icons-material/Close';
+import { Z_INDEX } from '../../../theme/custom';
+const getTransformForMessageCount = (messageCount) => messageCount ? `translateY(-${messageCount * 4 + 1}rem)` : '0rem';
+const getAnimation = (messageCount, previousMessageCount) => {
+    return keyframes `
+      from {
+        transform: ${getTransformForMessageCount(previousMessageCount)};
+      }
+      to {
+        transform: ${getTransformForMessageCount(messageCount)};
+      }
+    `;
+};
+export const SnackBar = () => {
+    const { messages, removeMessage, previousMessageCount } = useSnackBar();
+    const typographyStyles = getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM);
+    const animation = getAnimation(messages.length, previousMessageCount);
+    const animationStyle = `${animation} 100ms linear 1 forwards`;
+    return (_jsx(Column, Object.assign({ sx: {
+            position: 'fixed',
+            left: 0,
+            top: '100%',
+            width: '100vw',
+            display: 'flex',
+            alignItems: 'center',
+            pb: 3,
+            animation: animationStyle,
+            zIndex: Z_INDEX.DIALOG,
+        } }, { children: messages.map((message) => (_jsxs(Row, Object.assign({ sx: Object.assign({ width: ['90vw', '500px'], height: '56px', borderRadius: '4px', p: 4, mt: '0.5rem', border: '1px solid', bg: COLOR.PRIMARY, color: COLOR.WHITE, justifyContent: 'space-between', alignItems: 'center' }, typographyStyles) }, { children: [_jsx(Box, Object.assign({ sx: {
+                        overflow: 'hidden',
+                        whiteSpace: 'nowrap',
+                        textOverflow: 'ellipsis',
+                    }, "aria-live": "polite" }, { children: message.message })), _jsx(Box, { children: _jsx(Button, { "aria-label": "Dismiss Notice", type: BUTTON_TYPE.TEXT, primaryIcon: CloseIcon, onClick: () => {
+                            removeMessage(message.id);
+                        }, textColor: COLOR.WHITE }) })] }), message.id))) })));
+};

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

@@ -72,7 +72,7 @@ export const Button = React.forwardRef((_a, ref) => {
         flagInDevelopment('Icon buttons should include aria-label prop for accessibility');
     }
     if (isIconButton) {
-        hoverTransform = 'scale(1.15)';
+        hoverTransform = 'scale(1.05)';
     }
     if (type === BUTTON_TYPE.DEFAULT) {
         bg = color || COLOR.SECONDARY;

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

@@ -8,11 +8,11 @@ import { INPUT_SIZE, labelOffsetMap, labelTypographyMap } from '../TextInput';
 import { ListBox } from '../../ListBox';
 import { BUTTON_SIZE, BUTTON_TYPE, Button } from '../../Button';
 import { defaultRenderOptionLabel, getOptionId, } from '../option';
-import { useUniqueHtmlId } from '../../../../utils/hooks/useUniqueHtmlId';
 import { KEY_CODES, importedDefaultComponentShim } from '../../../../utils/misc';
 import { COLOR } from '../../../../theme/colors';
 import { Box } from '../../layout/Box';
 import { Label } from '../../text/Label';
+import { useUniqueId } from '../../../providers/uniqueIds';
 const ArrowDropDownIcon = importedDefaultComponentShim(_ArrowDropDownIcon);
 const typographyMap = {
     [INPUT_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
@@ -32,8 +32,8 @@ const buttonSizeMap = {
 const DEFAULT_WIDTH = '16rem';
 export function Select({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, inverted, renderOptionLabel: renderOptionLabelParam, sx, }) {
     const theme = useTheme();
-    const listboxId = useUniqueHtmlId('select-list-box');
-    const inputId = useUniqueHtmlId('select-input');
+    const listboxId = useUniqueId('select-list-box');
+    const inputId = useUniqueId('select-input');
     const [isOpen, setIsOpen] = useState(false);
     const [stagedOptionValue, setStagedOptionValue] = useState();
     const currentOption = useMemo(() => {
@@ -132,7 +132,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     overflow: 'hidden',
                     minWidth: '0%',
                     borderColor: inverted ? COLOR.GRAY : COLOR.LIGHT_GRAY,
-                    zIndex: theme.zIndex.LABEL,
+                    zIndex: theme.zIndex.ELEVATED,
                 } }, { children: _jsx("legend", Object.assign({ style: {
                         width: 'auto',
                         float: 'unset',
@@ -154,7 +154,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     position: 'absolute',
                     left: '0.5rem',
                     lineHeight: 1,
-                    zIndex: theme.zIndex.LABEL,
+                    zIndex: theme.zIndex.ELEVATED,
                     color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.PRIMARY,
                     px: 1,
                     top: labelOffsetMap[size],
@@ -171,7 +171,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     onSelectOption && onSelectOption(option.value);
                     close();
                 }, ref: refs.setFloating, renderOption: renderOption, sx: {
-                    zIndex: theme.zIndex.DROPDOWN,
+                    zIndex: theme.zIndex.DIALOG,
                 }, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { boxShadow: inverted
                         ? theme.boxShadow.INVERTED
                         : theme.boxShadow.NORMAL }) }))] })));

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

@@ -16,7 +16,7 @@ import { useTheme } from '../../../../theme';
 import { Icon } from '../../Icon';
 import { COLOR } from '../../../../theme/colors';
 import { Label } from '../../text/Label';
-import { useUniqueHtmlId } from '../../../../utils/hooks/useUniqueHtmlId';
+import { useUniqueId } from '../../../providers/uniqueIds';
 export var INPUT_SIZE;
 (function (INPUT_SIZE) {
     INPUT_SIZE["SM"] = "sm";
@@ -50,7 +50,7 @@ const defaultHeight = {
 };
 export const TextInput = React.forwardRef((_a, ref) => {
     var { value, label, onChange, onChangeRaw, onClick, inline, inverted, size: sizeParam, leftIcon, sx, disabled } = _a, rest = __rest(_a, ["value", "label", "onChange", "onChangeRaw", "onClick", "inline", "inverted", "size", "leftIcon", "sx", "disabled"]);
-    const id = useUniqueHtmlId('text-input');
+    const id = useUniqueId('text-input');
     const theme = useTheme();
     const size = sizeParam || INPUT_SIZE.MD;
     const display = inline === false ? 'flex' : 'inline-flex';
@@ -79,7 +79,7 @@ export const TextInput = React.forwardRef((_a, ref) => {
                     overflow: 'hidden',
                     minWidth: '0%',
                     borderColor: inverted ? COLOR.GRAY : COLOR.LIGHT_GRAY,
-                    zIndex: theme.zIndex.LABEL,
+                    zIndex: theme.zIndex.ELEVATED,
                 }, "aria-ignore": true }, { children: _jsx("legend", Object.assign({ style: {
                         width: 'auto',
                         float: 'unset',
@@ -112,7 +112,7 @@ export const TextInput = React.forwardRef((_a, ref) => {
                     color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.ND_PROVOST_BLUE,
                     left: '0.5rem',
                     lineHeight: 1,
-                    zIndex: theme.zIndex.LABEL,
+                    zIndex: theme.zIndex.ELEVATED,
                     px: 1,
                     top: labelOffsetMap[size],
                 } }, { children: label })))] })));

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

@@ -13,7 +13,7 @@ type ListBoxProps<Value extends Key, Option extends BasicOption<Value>> = Styled
     onBlur?: () => void;
 }>;
 export declare const ListBox: <Value extends React.Key = string, Option extends BasicOption<Value> = any>(props: {
-    sx?: import("../../../theme").StylesProp | undefined;
+    sx?: import("../../..").StylesProp | undefined;
     children?: React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
     options: Option[];

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TabList } from './index';
+import { ExampleTabs } from './example';
+const meta = {
+    title: 'Elements/TabList',
+    component: TabList,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(ExampleTabs, {}),
+};

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

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