@ndlib/component-library 0.0.7-9.1

package/dist/components/providers/menu.js

@@ -0,0 +1,304 @@
+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 { useCheckMidClick } from '../../utils/hooks/useCheckMidClick';
+import { useUniqueId } from './uniqueIds';
+import { useCheckMidKeyPress } from '../../utils/hooks/useCheckMidKeyPress';
+export var MENU_ACTION_TYPE;
+(function (MENU_ACTION_TYPE) {
+    MENU_ACTION_TYPE["SUBMENU"] = "SUBMENU";
+    MENU_ACTION_TYPE["LINK"] = "LINK";
+})(MENU_ACTION_TYPE || (MENU_ACTION_TYPE = {}));
+export var MENU_ORIENTATION;
+(function (MENU_ORIENTATION) {
+    MENU_ORIENTATION["HORIZONTAL"] = "HORIZONTAL";
+    MENU_ORIENTATION["VERTICAL"] = "VERTICAL";
+})(MENU_ORIENTATION || (MENU_ORIENTATION = {}));
+const MenuContext = React.createContext({
+    menu: { items: [], orientation: MENU_ORIENTATION.HORIZONTAL },
+    activePath: [],
+    isOpen: false,
+    open: () => { },
+    close: () => { },
+    getMenuItem: () => undefined,
+    getMenuItemProps: () => ({}),
+    getMenuProps: () => ({}),
+});
+const getAriaRoleDescription = (orientation) => {
+    if (orientation === MENU_ORIENTATION.HORIZONTAL) {
+        return 'Menu item, press right arrow to navigate to next item, press enter to select';
+    }
+    else {
+        return 'Menu item, press down arrow to navigate to next item, press enter to select';
+    }
+};
+export const useMenu = () => React.useContext(MenuContext);
+const activeStyles = {
+    outline: '2px solid blue',
+};
+const inactiveStyles = {
+    outline: 'none',
+};
+export const MenuProvider = ({ menu, children, }) => {
+    const { flagInDevelopment } = useEnvironment();
+    const menuId = useUniqueId('hcl-menu');
+    const { isMidClick, elementProps: checkMidclickProps } = useCheckMidClick();
+    const { isMidKeyPress, elementProps: checkMidKeyPressProps } = useCheckMidKeyPress();
+    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) => `${menuId}-item-${path.join('-')}`, [menuId]);
+    useEffect(() => {
+        if (activePath && isOpen) {
+            const activeChild = window.document.getElementById(getItemId(activePath));
+            activeChild === null || activeChild === void 0 ? void 0 : activeChild.focus();
+            clearTimeout(closeOnBlurTimeout.current);
+        }
+    }, [activePath, getItemId, isOpen]);
+    const open = React.useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    const close = React.useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    const getMenuItem = React.useCallback((path) => {
+        let menuItem = undefined;
+        for (const pathSegment of path) {
+            if (!menuItem) {
+                menuItem = menu.items.find((item) => item.id === pathSegment);
+            }
+            else if (menuItem.action.type === MENU_ACTION_TYPE.SUBMENU) {
+                menuItem = menuItem.action.submenu.items.find((item) => item.id === pathSegment);
+            }
+            if (!menuItem) {
+                return undefined;
+            }
+        }
+        return menuItem;
+    }, [menu]);
+    const activeMenuItem = React.useMemo(() => getMenuItem(activePath), [activePath, getMenuItem]);
+    const activeParentMenu = React.useMemo(() => {
+        let parentMenu = menu;
+        const tempActivePath = [...activePath];
+        tempActivePath.pop();
+        if (tempActivePath.length > 0) {
+            const parentMenuItem = getMenuItem(tempActivePath);
+            if ((parentMenuItem === null || parentMenuItem === void 0 ? void 0 : parentMenuItem.action.type) === MENU_ACTION_TYPE.SUBMENU) {
+                parentMenu = parentMenuItem === null || parentMenuItem === void 0 ? void 0 : parentMenuItem.action.submenu;
+            }
+            else {
+                flagInDevelopment('');
+            }
+        }
+        return parentMenu;
+    }, [activePath, menu, getMenuItem, flagInDevelopment]);
+    const activeIndex = React.useMemo(() => {
+        return activeParentMenu.items.findIndex((item) => item.id === activePath[activePath.length - 1]);
+    }, [activeParentMenu, activePath]);
+    const currentMenuLength = activeParentMenu.items.length;
+    const onFocus = React.useCallback(() => {
+        if (!isMidClick.current) {
+            open();
+        }
+    }, [isMidClick, open]);
+    const onBlur = React.useCallback(() => {
+        checkMidKeyPressProps.onBlur();
+        closeOnBlurTimeout.current = setTimeout(() => {
+            close();
+            setActivePath(initialPath);
+        }, 300);
+    }, [close, initialPath, checkMidKeyPressProps]);
+    const onKeyDown = React.useCallback((e) => {
+        checkMidKeyPressProps.onKeyDown(e);
+        const navigateNext = () => {
+            const nextIndex = (activeIndex + 1) % currentMenuLength;
+            const nextId = activeParentMenu.items[nextIndex].id;
+            setActivePath([...activePath.slice(0, activePath.length - 1), nextId]);
+        };
+        const navigatePrevious = () => {
+            if (activeIndex === 0) {
+                navigateOut();
+            }
+            else {
+                const prevIndex = activeIndex - 1;
+                const prevId = activeParentMenu.items[prevIndex].id;
+                setActivePath([...activePath.slice(0, activePath.length - 1), prevId]);
+            }
+        };
+        const navigateIn = () => {
+            var _a;
+            if (((_a = activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action) === null || _a === void 0 ? void 0 : _a.type) === MENU_ACTION_TYPE.SUBMENU) {
+                setActivePath([
+                    ...activePath,
+                    activeMenuItem.action.submenu.items[0].id,
+                ]);
+            }
+            else {
+                navigateNext();
+            }
+        };
+        const navigateOut = () => {
+            if (activePath.length > 1) {
+                setActivePath(activePath.slice(0, activePath.length - 1));
+            }
+        };
+        const select = () => {
+            if ((activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action.type) === MENU_ACTION_TYPE.SUBMENU) {
+                setActivePath(activePath.concat([activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.id]));
+            }
+            else if ((activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action.type) === MENU_ACTION_TYPE.LINK) {
+                window.location.href = activeMenuItem.action.to;
+            }
+        };
+        const isVertical = activeParentMenu.orientation === MENU_ORIENTATION.VERTICAL;
+        if (e.key === KEY_CODES.ENTER) {
+            if ((activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action.type) === MENU_ACTION_TYPE.LINK) {
+                select();
+            }
+            else if ((activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action.type) === MENU_ACTION_TYPE.SUBMENU) {
+                navigateIn();
+            }
+        }
+        if (e.key === KEY_CODES.ESCAPE) {
+            if (activePath.length > 1) {
+                navigateOut();
+            }
+            else {
+                const activeChild = window.document.getElementById(getItemId(activePath));
+                activeChild === null || activeChild === void 0 ? void 0 : activeChild.blur();
+            }
+        }
+        if (e.key === KEY_CODES.ARROW_DOWN) {
+            if (isVertical) {
+                navigateNext();
+            }
+            else {
+                navigateIn();
+            }
+        }
+        if (e.key === KEY_CODES.ARROW_UP) {
+            if (isVertical) {
+                navigatePrevious();
+            }
+            else {
+                navigateOut();
+            }
+        }
+        if (e.key === KEY_CODES.ARROW_RIGHT) {
+            if (isVertical) {
+                navigateIn();
+            }
+            else {
+                navigateNext();
+            }
+        }
+        if (e.key === KEY_CODES.ARROW_LEFT) {
+            if (isVertical) {
+                navigateOut();
+            }
+            else {
+                navigatePrevious();
+            }
+        }
+    }, [
+        activePath,
+        activeIndex,
+        activeMenuItem,
+        activeParentMenu,
+        currentMenuLength,
+        getItemId,
+        checkMidKeyPressProps,
+    ]);
+    const getMenuProps = React.useCallback((path) => {
+        const isTopLevel = !path;
+        let _menu = menu;
+        let menuItem = undefined;
+        if (path) {
+            menuItem = getMenuItem(path);
+            if ((menuItem === null || menuItem === void 0 ? void 0 : menuItem.action.type) === MENU_ACTION_TYPE.SUBMENU) {
+                _menu = menuItem.action.submenu;
+            }
+        }
+        const isVertical = _menu.orientation === MENU_ORIENTATION.VERTICAL;
+        const topLevelProps = Object.assign(Object.assign({}, checkMidclickProps), { onKeyUp: checkMidKeyPressProps.onKeyUp, onKeyDown,
+            onFocus,
+            onBlur });
+        return Object.assign({ role: 'menu', 'aria-orientation': isVertical ? 'vertical' : 'horizontal', tabIndex: isTopLevel ? 0 : -1 }, (isTopLevel ? topLevelProps : {}));
+    }, [
+        menu,
+        onFocus,
+        onBlur,
+        checkMidclickProps,
+        checkMidKeyPressProps,
+        getMenuItem,
+        onKeyDown,
+    ]);
+    const getMenuItemProps = React.useCallback((path) => {
+        const isTopLevel = path.length === 1;
+        const isActivePath = equals(path, activePath);
+        const useActiveStyles = isOpen && equals(path, activePath);
+        const styles = useActiveStyles ? activeStyles : inactiveStyles;
+        return Object.assign(Object.assign({}, checkMidclickProps), { role: 'menuitem', 'aria-roledescription': getAriaRoleDescription(activeParentMenu.orientation), id: getItemId(path), onKeyDown: equals(path, activePath) ? onKeyDown : undefined, onKeyUp: checkMidKeyPressProps.onKeyUp, tabIndex: -1, onFocus: () => {
+                if (!isMidClick) {
+                    setActivePath(path);
+                }
+            }, onMouseDown: () => {
+                checkMidclickProps.onMouseDown();
+                const menuItem = getMenuItem(path);
+                if ((menuItem === null || menuItem === void 0 ? void 0 : menuItem.action.type) === MENU_ACTION_TYPE.LINK) {
+                    window.location.href = menuItem.action.to;
+                }
+            }, onClick: (e) => {
+                const menuItem = getMenuItem(path);
+                const isSubmenu = (menuItem === null || menuItem === void 0 ? void 0 : menuItem.action.type) === MENU_ACTION_TYPE.SUBMENU;
+                if (!isSubmenu) {
+                    e.preventDefault();
+                }
+                if (isSubmenu &&
+                    isActivePath &&
+                    isTopLevel &&
+                    !isMidKeyPress.current &&
+                    isOpen) {
+                    close();
+                }
+                else if (isSubmenu &&
+                    isTopLevel &&
+                    !isMidKeyPress.current &&
+                    (!isOpen || !isActivePath)) {
+                    setActivePath(path);
+                    open();
+                }
+                else {
+                    onKeyDown({
+                        key: KEY_CODES.ENTER,
+                    });
+                }
+            }, style: styles });
+    }, [
+        getItemId,
+        getMenuItem,
+        activePath,
+        checkMidclickProps,
+        isMidKeyPress,
+        checkMidKeyPressProps,
+        isOpen,
+        close,
+        open,
+        onKeyDown,
+        activeParentMenu,
+        isMidClick,
+    ]);
+    const contextValue = {
+        menu,
+        isOpen,
+        open,
+        close,
+        activePath,
+        getMenuItem,
+        getMenuProps,
+        getMenuItemProps,
+    };
+    return (_jsx(MenuContext.Provider, Object.assign({ value: contextValue }, { children: typeof children === 'function' ? children(contextValue) : children })));
+};

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.d.ts

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react';
+import { ComponentConfigParam } from './componentConfig';
+import { ENVIRONMENT } from './env';
+import { AlertQueryParams } from './alerts';
+import { StructuredDataProps } from '../composites/StructuredData';
+export type UiConfig = {
+    structuredData?: StructuredDataProps;
+    env?: ENVIRONMENT;
+    components?: ComponentConfigParam;
+    alertsConfig?: AlertQueryParams;
+    disableAlerts?: boolean;
+    loadFonts?: boolean;
+    loadGlobalStyles?: boolean;
+    includeTheme?: boolean;
+};
+type UiProviderProps = PropsWithChildren<UiConfig>;
+export declare const UiProvider: React.FC<UiProviderProps>;
+export {};

package/dist/components/providers/ui.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentConfigProvider, } from './componentConfig';
+import { EnvironmentProvider } from './env';
+import { ThemeProvider } from '../../theme/';
+import { AlertsProvider } from './alerts';
+import { FontLoader } from '../../FontLoader';
+import { GlobalStyles } from '../../theme/GlobalStyles';
+import { DialogsProvider } from './dialogs';
+import { MediaSizeProvider } from './media';
+import StructuredData from '../composites/StructuredData';
+import { SnackBarProvider } from './snackBar';
+import { UniqueIdProvider } from './uniqueIds';
+export const UiProvider = ({ structuredData, 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(UniqueIdProvider, { children: _jsx(SnackBarProvider, { children: _jsx(DialogsProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) }) }) })) }), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {}), structuredData && _jsx(StructuredData, Object.assign({}, structuredData))] })));
+    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

@@ -0,0 +1,53 @@
+export { theme, ThemeProvider, useTheme } from './theme';
+export type { StylesProp, StyledElementProps } 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 { ArrowLink } from './components/elements/ArrowLink';
+export { BrandingBar } from './components/elements/BrandingBar';
+export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elements/Button';
+export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
+export { Label, LABEL_SIZE } from './components/elements/text/Label';
+export { Paragraph, PARAGRAPH_SIZE } from './components/elements/text/Paragraph';
+export { Group, useGroup, GROUP_TYPE } from './components/elements/Group';
+export { Markdown } from './components/elements/Markdown';
+export { Box } from './components/elements/layout/Box';
+export { Column } from './components/elements/layout/Column';
+export { Row } from './components/elements/layout/Row';
+export { Link, LINK_SIZE } from './components/elements/Link';
+export { INPUT_SIZE, TextInput } from './components/elements/Fields/TextInput';
+export { Select } from './components/elements/Fields/Select';
+export { DatePicker } from './components/elements/Fields/DatePicker';
+export { MonthPicker } from './components/elements/Fields/MonthPicker';
+export { Checkbox } from './components/elements/Fields/Checkbox';
+export { CheckboxGroup } from './components/elements/Fields/CheckboxGroup';
+export { Radio } from './components/elements/Fields/Radio';
+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 { Dropdown } from './components/elements/Dropdown';
+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 { StructuredData } from './components/composites/StructuredData';
+export { UiProvider } from './components/providers/ui';
+export { MenuProvider, useMenu, MENU_ACTION_TYPE, MENU_ORIENTATION, } from './components/providers/menu';
+export { SnackBarProvider, useSnackBar } from './components/providers/snackBar';
+export { useAlerts, AlertsProvider, ALERT_TYPE, 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 { sortByKey, SORT_DIRECTION } from './utils/sortByKey';
+export type { SortConfig } from './utils/sortByKey';
+export { useHover } from './utils/hooks/useHover';

package/dist/index.js

@@ -0,0 +1,51 @@
+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 { ArrowLink } from './components/elements/ArrowLink';
+export { BrandingBar } from './components/elements/BrandingBar';
+export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elements/Button';
+export { Heading, HEADING_SIZE } from './components/elements/text/Heading';
+export { Label, LABEL_SIZE } from './components/elements/text/Label';
+export { Paragraph, PARAGRAPH_SIZE } from './components/elements/text/Paragraph';
+export { Group, useGroup, GROUP_TYPE } from './components/elements/Group';
+export { Markdown } from './components/elements/Markdown';
+export { Box } from './components/elements/layout/Box';
+export { Column } from './components/elements/layout/Column';
+export { Row } from './components/elements/layout/Row';
+export { Link, LINK_SIZE } from './components/elements/Link';
+export { INPUT_SIZE, TextInput } from './components/elements/Fields/TextInput';
+export { Select } from './components/elements/Fields/Select';
+export { DatePicker } from './components/elements/Fields/DatePicker';
+export { MonthPicker } from './components/elements/Fields/MonthPicker';
+export { Checkbox } from './components/elements/Fields/Checkbox';
+export { CheckboxGroup } from './components/elements/Fields/CheckboxGroup';
+export { Radio } from './components/elements/Fields/Radio';
+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 { Dropdown } from './components/elements/Dropdown';
+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 { StructuredData } from './components/composites/StructuredData';
+export { UiProvider } from './components/providers/ui';
+export { MenuProvider, useMenu, MENU_ACTION_TYPE, MENU_ORIENTATION, } from './components/providers/menu';
+export { SnackBarProvider, useSnackBar } from './components/providers/snackBar';
+export { useAlerts, AlertsProvider, ALERT_TYPE, 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 { sortByKey, SORT_DIRECTION } from './utils/sortByKey';
+export { useHover } from './utils/hooks/useHover';

package/dist/theme/Color.stories.d.ts

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

package/dist/theme/Color.stories.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { COLOR } from './colors';
+import { GROUP_TYPE, Group } from '../components/elements/Group';
+import { Row } from '../components/elements/layout/Row';
+import { Box } from '../components/elements/layout/Box';
+import { LABEL_SIZE, Label } from '../components/elements/text/Label';
+const meta = {
+    title: 'Theme/Colors',
+};
+const ColorSquare = ({ color }) => {
+    return _jsx(Box, { sx: { p: 3, bg: color } });
+};
+export default meta;
+const colors = [
+    { color: COLOR.TEXT, label: 'TEXT' },
+    { color: COLOR.BACKGROUND, label: 'BACKGROUND' },
+    { color: COLOR.PRIMARY, label: 'PRIMARY' },
+    { color: COLOR.PRIMARY_HIGHLIGHT, label: 'PRIMARY_HIGHLIGHT' },
+    { color: COLOR.GRAY, label: 'GRAY' },
+    { color: COLOR.DARK_GRAY, label: 'DARK_GRAY' },
+    { color: COLOR.LIGHT_GRAY, label: 'LIGHT GRAY' },
+    { color: COLOR.EXTRA_LIGHT_GRAY, label: 'EXTRA_LIGHT_GRAY' },
+    { color: COLOR.EXTRA_EXTRA_LIGHT_GRAY, label: 'EXTRA_EXTRA_LIGHT_GRAY' },
+    { color: COLOR.ND_BLUE, label: 'ND_BLUE' },
+    { color: COLOR.ND_BLUE_DARK, label: 'ND_BLUE_DARK' },
+    { color: COLOR.ND_BLUE_LIGHT, label: 'ND_BLUE_LIGHT' },
+    { color: COLOR.ND_BLUE_BRIGHT, label: 'ND_BLUE_BRIGHT' },
+    { color: COLOR.ND_GOLD, label: 'ND_GOLD' },
+    { color: COLOR.ND_GOLD_LIGHT, label: 'ND_GOLD_LIGHT' },
+    { color: COLOR.ND_GOLD_DARK, label: 'ND_GOLD_DARK' },
+    { color: COLOR.ND_METALLIC_GOLD, label: 'ND_METALLIC_GOLD' },
+    { color: COLOR.ND_PROVOST_BLUE, label: 'ND_PROVOST_BLUE' },
+    { color: COLOR.ND_SECONDARY_1, label: 'ND_SECONDARY_1' },
+    { color: COLOR.ND_SECONDARY_2, label: 'ND_SECONDARY_2' },
+    { color: COLOR.ND_SECONDARY_3, label: 'ND_SECONDARY_3' },
+    { color: COLOR.ND_SECONDARY_4, label: 'ND_SECONDARY_4' },
+    { color: COLOR.ND_SECONDARY_5, label: 'ND_SECONDARY_5' },
+    { color: COLOR.ND_SECONDARY_6, label: 'ND_SECONDARY_6' },
+    { color: COLOR.ND_TERTIARY_1, label: 'ND_TERTIARY_1' },
+    { color: COLOR.ND_TERTIARY_2, label: 'ND_TERTIARY_2' },
+    { color: COLOR.ND_TERTIARY_3, label: 'ND_TERTIARY_3' },
+    { color: COLOR.ND_TERTIARY_4, label: 'ND_TERTIARY_4' },
+    { color: COLOR.ND_TERTIARY_5, label: 'ND_TERTIARY_5' },
+    { color: COLOR.ND_TERTIARY_6, label: 'ND_TERTIARY_6' },
+    { color: COLOR.ALERT_INFORMATIONAL_BG, label: 'ALERT_INFORMATIONAL_BG' },
+    {
+        color: COLOR.ALERT_INFORMATIONAL_BORDER,
+        label: 'ALERT_INFORMATIONAL_BORDER',
+    },
+    {
+        color: COLOR.ALERT_INFORMATIONAL_YELLOW_BG,
+        label: 'ALERT_INFORMATIONAL_YELLOW_BG',
+    },
+    {
+        color: COLOR.ALERT_INFORMATIONAL_YELLOW_BORDER,
+        label: 'ALERT_INFORMATIONAL_YELLOW_BORDER',
+    },
+    { color: COLOR.ALERT_WARNING_BG, label: 'ALERT_WARNING_BG' },
+    { color: COLOR.ALERT_WARNING_BORDER, label: 'ALERT_WARNING_BORDER' },
+];
+export const Default = {
+    render: () => (_jsx(Row, Object.assign({ sx: { flexWrap: 'wrap' } }, { children: colors.map((color) => (_jsxs(Group, Object.assign({ type: GROUP_TYPE.GROUP, sx: { mr: 3, mt: 0, flexBasis: '100px' } }, { children: [_jsx(Label, Object.assign({ size: LABEL_SIZE.SM }, { children: color.label })), _jsx(ColorSquare, { color: color.color })] }), color.label))) }))),
+};

package/dist/theme/GlobalStyles.d.ts

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