@ndlib/component-library 0.0.36 → 0.0.37

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

@@ -6,4 +6,5 @@ type Story = StoryObj<typeof EmptyState>;
 export declare const Default: Story;
 export declare const Small: Story;
 export declare const CustomMessage: Story;
+export declare const JsxMessage: Story;
 export declare const CustomIcon: Story;

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

@@ -1,6 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EMPTY_STATE_SIZE, EmptyState } from '.';
 import NotInterestedIcon from '@mui/icons-material/NotInterested';
+import { Link } from '../../elements/Link';
+import { FONT_SIZE } from '../../../theme/typography';
 const meta = {
     title: 'Composites/EmptyState',
     component: EmptyState,
@@ -16,7 +18,11 @@ export const Small = {
     args: {},
 };
 export const CustomMessage = {
-    render: () => _jsx(EmptyState, { message: "Custom message" }),
+    render: () => _jsx(EmptyState, { children: "Custom message" }),
+    args: {},
+};
+export const JsxMessage = {
+    render: () => (_jsxs(EmptyState, { children: ["Something is wrong.", ' ', _jsx(Link, Object.assign({ to: "/", sx: { fontSize: FONT_SIZE.MD } }, { children: "Click here to fix." }))] })),
     args: {},
 };
 export const CustomIcon = {

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

@@ -6,7 +6,7 @@ const MOCK_ICON_TEST_ID = 'mock-icon';
 const MockIcon = () => _jsx("div", { "data-testid": MOCK_ICON_TEST_ID });
 describe('EmptyState', () => {
     it('renders passed message', () => {
-        const { getByText } = render(_jsx(EmptyState, { message: TEST_MESSAGE }));
+        const { getByText } = render(_jsx(EmptyState, { children: TEST_MESSAGE }));
         expect(getByText(TEST_MESSAGE)).toBeDefined();
     });
     it('renders default message if no message passed', () => {

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

@@ -6,6 +6,7 @@ export declare enum EMPTY_STATE_SIZE {
 }
 type EmptyStateProps = StyledElementProps<HTMLDivElement, {
     icon?: React.FC;
+    omitIcon?: boolean;
     size?: EMPTY_STATE_SIZE;
     message?: string;
 }>;

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

@@ -26,7 +26,7 @@ export var EMPTY_STATE_SIZE;
 })(EMPTY_STATE_SIZE || (EMPTY_STATE_SIZE = {}));
 export const DEFAULT_MESSAGE = 'No results found.';
 export const EmptyState = (_a) => {
-    var { icon, message, size: sizeProp, sx } = _a, rest = __rest(_a, ["icon", "message", "size", "sx"]);
+    var { omitIcon, icon, children, size: sizeProp, sx } = _a, rest = __rest(_a, ["omitIcon", "icon", "children", "size", "sx"]);
     const size = sizeProp || EMPTY_STATE_SIZE.LG;
-    return (_jsxs(Column, Object.assign({ sx: Object.assign({ width: '100%', alignItems: 'center', justifyContent: 'center', mt: size === EMPTY_STATE_SIZE.SM ? 3 : 5 }, sx) }, rest, { children: [_jsx(Row, { children: _jsx(Icon, { icon: icon || SearchOffIcon, size: size === EMPTY_STATE_SIZE.SM ? FONT_SIZE.ML : FONT_SIZE.XL, color: COLOR.GRAY }) }), _jsx(Row, Object.assign({ sx: { mt: size === EMPTY_STATE_SIZE.SM ? 0 : 1 } }, { children: _jsx(Paragraph, Object.assign({ sx: { color: COLOR.GRAY }, size: size === EMPTY_STATE_SIZE.SM ? PARAGRAPH_SIZE.MD : PARAGRAPH_SIZE.LG }, { children: message || DEFAULT_MESSAGE })) }))] })));
+    return (_jsxs(Column, Object.assign({ sx: Object.assign({ width: '100%', alignItems: 'center', justifyContent: 'center', mt: size === EMPTY_STATE_SIZE.SM ? 3 : 5 }, sx) }, rest, { children: [_jsx(Row, { children: omitIcon ? null : (_jsx(Icon, { icon: icon || SearchOffIcon, size: size === EMPTY_STATE_SIZE.SM ? FONT_SIZE.ML : FONT_SIZE.XL, color: COLOR.GRAY })) }), _jsx(Row, Object.assign({ sx: { mt: size === EMPTY_STATE_SIZE.SM ? 0 : 1 } }, { children: _jsx(Paragraph, Object.assign({ sx: { color: COLOR.GRAY }, size: size === EMPTY_STATE_SIZE.SM ? PARAGRAPH_SIZE.MD : PARAGRAPH_SIZE.LG }, { children: children || DEFAULT_MESSAGE })) }))] })));
 };

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

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

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from '.';
+import { Button } from '../../elements/Button';
+import { Paragraph } from '../../elements/text/Paragraph';
+import { useDialog } from '../../providers/dialogs';
+import { useTheme } from '../../../theme';
+const meta = {
+    title: 'Composites/Modal',
+    component: Modal,
+    tags: ['autodocs'],
+};
+export default meta;
+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: [
+                    {
+                        label: 'Secondary',
+                        isPrimary: false,
+                        onClick: () => { },
+                    },
+                    {
+                        label: 'Primary',
+                        isPrimary: true,
+                        onClick: () => { },
+                    },
+                ] }, { children: _jsx(Paragraph, { children: "Modal body goes here" }) }))] }));
+};
+export const Default = {
+    render: () => _jsx(ModalExample, {}),
+    args: {},
+};

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

@@ -0,0 +1,17 @@
+import { StyledElementProps } from '../../../theme';
+import React from 'react';
+type ModalProps = StyledElementProps<HTMLDivElement, {
+    isOpen: boolean;
+    close: () => void;
+    heading: string;
+    hideHeading?: boolean;
+    footer?: React.ReactNode;
+    actions?: ModalAction[];
+}>;
+type ModalAction = {
+    label: string;
+    isPrimary?: boolean;
+    onClick: () => void;
+};
+export declare const Modal: React.FC<ModalProps>;
+export {};

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

@@ -0,0 +1,52 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _ReactModal from 'react-modal';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+import { useTheme } from '../../../theme';
+import { GROUP_TYPE, Group } from '../../elements/Group';
+import { Row } from '../../elements/layout/Row';
+import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
+import { BUTTON_TYPE, Button } from '../../elements/Button';
+import { COLOR } from '../../../theme/colors';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { useMediaQuery } from '../../providers/media';
+import { useComponentConfig } from '../../providers/componentConfig';
+const ReactModal = importedDefaultComponentShim(_ReactModal);
+export const Modal = (_a) => {
+    var { children, heading, hideHeading, isOpen, footer, actions, close } = _a, props = __rest(_a, ["children", "heading", "hideHeading", "isOpen", "footer", "actions", "close"]);
+    const { breakpoint } = useMediaQuery();
+    const { modal } = useComponentConfig();
+    const theme = useTheme();
+    return (_jsx(ReactModal, Object.assign({ isOpen: isOpen, shouldFocusAfterRender: true, appElement: modal.appElement, onRequestClose: close }, props, { style: {
+            overlay: {
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                zIndex: theme.zIndex.MODAL,
+            },
+            content: {
+                padding: 0,
+                minWidth: breakpoint === 0 ? 'calc(100% - 1rem)' : '500px',
+                top: '50%',
+                left: '50%',
+                right: 'auto',
+                bottom: 'auto',
+                marginRight: '-50%',
+                transform: 'translate(-50%, -50%)',
+            },
+        } }, { children: _jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION, sx: { my: 0 } }, { children: [!hideHeading && (_jsxs(Row, Object.assign({ justify: "space-between", align: "center", sx: {
+                        p: 3,
+                        borderBottom: 'solid 1px',
+                        borderColor: COLOR.LIGHT_GRAY,
+                    } }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, typography: TYPOGRAPHY_TYPE.CONTROL_MEDIUM }, { children: heading })), _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, onClick: close }, { children: "Close" }))] }))), _jsx(Row, Object.assign({ sx: { p: 3 } }, { children: children })), _jsxs(Row, Object.assign({ sx: { borderTop: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, p: 3 } }, { children: [footer, actions !== undefined && (_jsx(Row, Object.assign({ sx: { width: '100%', justifyContent: 'flex-end' } }, { children: actions.map((action, index) => (_jsx(Button, Object.assign({ type: action.isPrimary ? BUTTON_TYPE.DEFAULT : BUTTON_TYPE.OUTLINE, onClick: action.onClick, sx: {
+                                    mr: index < actions.length - 1 ? 1 : 0,
+                                } }, { children: action.label }), index))) })))] }))] })) })));
+};

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

@@ -88,7 +88,7 @@ export const Button = React.forwardRef((_a, ref) => {
     }
     if (type === BUTTON_TYPE.OUTLINE) {
         bg = COLOR.BACKGROUND;
-        textColor = color || COLOR.PRIMARY;
+        textColor = color || COLOR.TEXT;
         borderColor = textColor;
     }
     if (textColorParam) {

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof CheckboxGroup>;
 export default meta;
 type Story = StoryObj<typeof CheckboxGroup>;
 export declare const Default: Story;
+export declare const Columns: Story;

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

@@ -21,3 +21,6 @@ const StatefulCheckboxGroup = (props) => {
 export const Default = {
     render: () => (_jsx(Row, { children: _jsx(StatefulCheckboxGroup, {}) })),
 };
+export const Columns = {
+    render: () => (_jsx(Row, { children: _jsx(StatefulCheckboxGroup, { columns: 2 }) })),
+};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyledElementProps } from '../../../../theme';
+import { StyledElementProps, StylesProp } from '../../../../theme';
 import { Key } from '../option';
 type Option = {
     value: Key;
@@ -9,6 +9,8 @@ type CheckboxGroupProps = StyledElementProps<HTMLDivElement, {
     onChange: (value: Set<Key>) => void;
     options: Option[];
     checkedOptions?: Set<Key>;
+    columnStyles: StylesProp;
+    columns?: number;
 }, string>;
 export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
 export {};

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

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { Row } from '../../layout/Row';
 import { Checkbox } from '../Checkbox';
 import { Label } from '../../text/Label';
@@ -18,18 +19,32 @@ import { GROUP_TYPE } from '../../Group';
 import { Column } from '../../layout/Column';
 import { TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../../theme/typography';
 export const CheckboxGroup = (_a) => {
-    var { options, checkedOptions, onChange } = _a, rest = __rest(_a, ["options", "checkedOptions", "onChange"]);
-    return (_jsx(Column, Object.assign({}, rest, { children: options.map((option) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.RAW }, { children: ({ labelTargetId }) => (_jsxs(Row, Object.assign({ sx: {
-                    mb: 3,
-                    alignItems: 'center',
-                } }, { children: [_jsx(Checkbox, { onChange: (checked) => {
-                            const updatedSet = new Set(checkedOptions || []);
-                            if (checked) {
-                                updatedSet.add(option.value);
-                            }
-                            else {
-                                updatedSet.delete(option.value);
-                            }
-                            onChange(updatedSet);
-                        }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, sx: { mr: 2 } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
+    var { options, checkedOptions, columns: columnsProp, columnStyles, onChange } = _a, rest = __rest(_a, ["options", "checkedOptions", "columns", "columnStyles", "onChange"]);
+    const columns = columnsProp || 1;
+    const optionsByColumn = useMemo(() => {
+        // place first i/n items into first column, next i/n items into second column, etc.
+        const optionsByColumn = [];
+        for (let i = 0; i < options.length; i++) {
+            const maxPerColumn = Math.ceil(options.length / columns);
+            const columnIndex = Math.floor(i / maxPerColumn);
+            if (optionsByColumn[columnIndex] === undefined) {
+                optionsByColumn[columnIndex] = [];
+            }
+            optionsByColumn[columnIndex].push(options[i]);
+        }
+        return optionsByColumn;
+    }, [options, columns]);
+    return (_jsx(Row, Object.assign({}, rest, { children: optionsByColumn.map((options, index) => (_jsx(Column, Object.assign({ grow: 1, sx: Object.assign({ mr: 4 }, columnStyles) }, { children: options.map((option) => (_jsx(Group, Object.assign({ type: GROUP_TYPE.RAW }, { children: ({ labelTargetId }) => (_jsxs(Row, Object.assign({ sx: {
+                        mb: 3,
+                        alignItems: 'center',
+                    } }, { children: [_jsx(Checkbox, { onChange: (checked) => {
+                                const updatedSet = new Set(checkedOptions || []);
+                                if (checked) {
+                                    updatedSet.add(option.value);
+                                }
+                                else {
+                                    updatedSet.delete(option.value);
+                                }
+                                onChange(updatedSet);
+                            }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, sx: { mr: 2 } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) }), index))) })));
 };

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

@@ -3,15 +3,15 @@ import { StyledElementProps } from '../../../../theme';
 import { INPUT_SIZE } from '../TextInput';
 import { BasicOption, Key, RenderOption, RenderOptionLabel } from '../option';
 type SelectProps<Value extends Key, Option extends BasicOption<Value>> = StyledElementProps<HTMLSelectElement, {
-    placeholder: string;
+    placeholder?: string;
     size?: INPUT_SIZE;
     leftIcon?: React.FC<any>;
     value: Value;
     label?: string;
     onSelectOption: (value: Value) => void;
     options: Option[];
-    renderOption: RenderOption<Value, Option>;
-    renderOptionLabel: RenderOptionLabel<Option>;
+    renderOption?: RenderOption<Value, Option>;
+    renderOptionLabel?: RenderOptionLabel<Option>;
 }, string>;
 export declare function Select<Value extends Key, Option extends BasicOption<Value>>({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, renderOptionLabel: renderOptionLabelParam, sx, }: SelectProps<Value, Option>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -15,7 +15,7 @@ import React, { useState } from 'react';
 import { useTheme } from '../../../../theme';
 import { COLOR, colors } from '../../../../theme/colors';
 import { getTypographyStyles, } from '../../../../theme/typography';
-import { useMediaQuery } from '../../../../utils/hooks/useMediaQuery';
+import { useMediaQuery } from '../../../providers/media';
 const ReadMoreLink = (props) => {
     // const theme = useTheme()
     const bg = colors[props.bg || COLOR.BACKGROUND];

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

@@ -8,6 +8,9 @@ export type ComponentConfig = {
         internalLinkComponent: React.FC<LinkComponentProps>;
         externalLinkComponent: React.FC<LinkComponentProps>;
     };
+    modal: {
+        appElement: HTMLElement | undefined;
+    };
 };
 export type ComponentConfigParam = DeepPartial<ComponentConfig>;
 export type LinkComponentProps = StyledElementProps<HTMLAnchorElement, {

package/dist/components/providers/componentConfig.js

@@ -25,6 +25,9 @@ const defaultComponentConfig = {
         internalLinkComponent: DefaultLink,
         externalLinkComponent: DefaultLink,
     },
+    modal: {
+        appElement: undefined,
+    },
 };
 export const ComponentConfigContext = createContext(defaultComponentConfig);
 export const useComponentConfig = () => useContext(ComponentConfigContext);

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

@@ -0,0 +1,9 @@
+import React, { PropsWithChildren } from 'react';
+export declare const DialogsProvider: React.FC<PropsWithChildren>;
+export declare const useDialog: (id: string) => {
+    open: () => void;
+    close: () => void;
+    state: {
+        isOpen: boolean;
+    };
+};

package/dist/components/providers/dialogs.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+const DialogContext = React.createContext({
+    open: () => { },
+    close: () => { },
+    dialogs: {},
+});
+export const DialogsProvider = ({ children }) => {
+    const [dialogs, setDialogs] = React.useState({});
+    const open = (key) => {
+        setDialogs(Object.assign(Object.assign({}, dialogs), { [key]: { isOpen: true } }));
+    };
+    const close = (key) => {
+        setDialogs(Object.assign(Object.assign({}, dialogs), { [key]: { isOpen: false } }));
+    };
+    return (_jsx(DialogContext.Provider, Object.assign({ value: {
+            dialogs,
+            open,
+            close,
+        } }, { children: children })));
+};
+export const useDialog = (id) => {
+    const dialogs = React.useContext(DialogContext);
+    const open = () => dialogs.open(id);
+    const close = () => dialogs.close(id);
+    const state = dialogs.dialogs[id] || { isOpen: false };
+    return {
+        open,
+        close,
+        state,
+    };
+};

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

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+type MediaContextType = {
+    screenSize: number;
+    breakpoint: number;
+};
+export declare const MediaSizeProvider: React.FC<PropsWithChildren>;
+export declare const useMediaQuery: () => MediaContextType;
+export {};

package/dist/components/providers/media.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
+import { useTheme } from '../../theme';
+const MediaContext = createContext({
+    screenSize: -1,
+    breakpoint: -1,
+});
+export const MediaSizeProvider = ({ children, }) => {
+    const [renderCount, setRenderCount] = useState(0);
+    const theme = useTheme();
+    const breakpoints = theme.breakpoints.map((bp) => parseInt(bp.slice(0, -2)), [theme]);
+    const { screenSize, breakpoint } = useMemo(() => {
+        if (typeof window === 'undefined') {
+            return {
+                screenSize: -1,
+                breakpoint: -1,
+            };
+        }
+        const screenSize = window.innerWidth;
+        const closestBreakpoint = breakpoints.findIndex((bp) => screenSize < bp);
+        const breakpoint = closestBreakpoint === -1 ? breakpoints.length : closestBreakpoint;
+        return {
+            screenSize,
+            breakpoint,
+        };
+    }, [renderCount, breakpoints]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const rerenderOnResize = () => {
+            setRenderCount((renderCount) => renderCount + 1);
+        };
+        window.addEventListener('resize', rerenderOnResize);
+        return () => {
+            window.removeEventListener('resize', rerenderOnResize);
+        };
+    }, []);
+    return (_jsx(MediaContext.Provider, Object.assign({ value: {
+            breakpoint,
+            screenSize,
+        } }, { children: children })));
+};
+export const useMediaQuery = () => useContext(MediaContext);

package/dist/components/providers/ui.js

@@ -5,7 +5,8 @@ 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';
 export const UiProvider = ({ env, components, alertsConfig, children, loadFonts, loadGlobalStyles, }) => {
-    console.log('here');
-    return (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(ThemeProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) })), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {})] })));
+    return (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(ThemeProvider, { 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, {})] })));
 };

package/dist/index.d.ts

@@ -32,8 +32,10 @@ export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 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 { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';
 export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';
+export { MediaSizeProvider, useMediaQuery } from './components/providers/media';
+export { DialogsProvider, useDialog } from './components/providers/dialogs';
 export { useHover } from './utils/hooks/useHover';
-export { useMediaQuery } from './utils/hooks/useMediaQuery';

package/dist/index.js

@@ -32,8 +32,10 @@ export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 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 { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';
 export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';
+export { MediaSizeProvider, useMediaQuery } from './components/providers/media';
+export { DialogsProvider, useDialog } from './components/providers/dialogs';
 export { useHover } from './utils/hooks/useHover';
-export { useMediaQuery } from './utils/hooks/useMediaQuery';

package/dist/theme/custom.d.ts

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

package/dist/theme/custom.js

@@ -9,4 +9,5 @@ export var Z_INDEX;
     Z_INDEX[Z_INDEX["NORMAL"] = 1] = "NORMAL";
     Z_INDEX[Z_INDEX["LABEL"] = 2] = "LABEL";
     Z_INDEX[Z_INDEX["DROPDOWN"] = 3] = "DROPDOWN";
+    Z_INDEX[Z_INDEX["MODAL"] = 4] = "MODAL";
 })(Z_INDEX || (Z_INDEX = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -54,6 +54,7 @@
     "@types/react": "^18.0.28",
     "@types/react-datepicker": "^4.15.0",
     "@types/react-dom": "^18.0.11",
+    "@types/react-modal": "^3.16.0",
     "@types/sanitize-html": "^2.9.0",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
@@ -82,6 +83,7 @@
     "@floating-ui/react": "^0.24.5",
     "react-datepicker": "^4.16.0",
     "react-markdown": "^8.0.7",
+    "react-modal": "^3.16.1",
     "rehype-raw": "^6.1.1",
     "sanitize-html": "^2.11.0"
   }

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

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

package/dist/utils/hooks/useMediaQuery.js

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