@ndlib/component-library 0.0.7-9.1

package/dist/components/elements/text/Paragraph/Paragraph.test.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../../utils/test';
+import { Paragraph } from '.';
+describe('Paragraph', () => {
+    it('renders without an error', () => {
+        const { getByText } = render(_jsx(Paragraph, { children: "Foo" }));
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
+import { StyledElementProps } from '../../../../theme';
+type ParagraphProps = StyledElementProps<HTMLSpanElement, {
+    size?: PARAGRAPH_SIZE;
+    typography?: TYPOGRAPHY_TYPE;
+}>;
+export declare enum PARAGRAPH_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare const Paragraph: React.FC<ParagraphProps>;
+export {};

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

@@ -0,0 +1,29 @@
+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 { getTypographyStyles, TYPOGRAPHY_TYPE, } from '../../../../theme/typography';
+export var PARAGRAPH_SIZE;
+(function (PARAGRAPH_SIZE) {
+    PARAGRAPH_SIZE["SM"] = "sm";
+    PARAGRAPH_SIZE["MD"] = "md";
+    PARAGRAPH_SIZE["LG"] = "lg";
+})(PARAGRAPH_SIZE || (PARAGRAPH_SIZE = {}));
+const SIZE_TYPOGRAPHY_MAP = {
+    [PARAGRAPH_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
+    [PARAGRAPH_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,
+    [PARAGRAPH_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
+};
+export const Paragraph = (_a) => {
+    var { size, typography: typographyParam, sx } = _a, rest = __rest(_a, ["size", "typography", "sx"]);
+    const typography = typographyParam || SIZE_TYPOGRAPHY_MAP[size || PARAGRAPH_SIZE.MD];
+    return (_jsx("div", Object.assign({ sx: Object.assign(Object.assign(Object.assign({}, getTypographyStyles(typography)), { my: 1 }), sx) }, rest)));
+};

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

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

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReadMore } from '.';
+import { Column } from '../../layout/Column';
+import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
+import { COLOR } from '../../../../theme/colors';
+const meta = {
+    title: 'Elements/ReadMore',
+    component: ReadMore,
+    tags: ['autodocs'],
+};
+export default meta;
+const p1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices venenatis purus at porta. Etiam congue sapien leo, sed malesuada justo commodo in. Nunc consequat, massa non cursus posuere, magna eros lacinia lectus, eget lobortis mi erat ut justo. Maecenas nisi mi, mollis sed ornare vitae, pharetra sed augue. Curabitur mollis orci risus, sed imperdiet nisi aliquet et. Ut non elit nec magna rhoncus maximus sit amet ut dui. Mauris sit amet eleifend lectus. Aliquam consectetur posuere libero eu ultricies. Etiam rutrum non orci nec vulputate. Sed vel accumsan diam. Cras aliquet eros eros, sit amet pharetra eros tincidunt ut. Vestibulum est erat, eleifend dapibus eros vel, elementum vehicula risus. Etiam blandit condimentum sodales. Donec non libero in orci aliquam egestas fringilla eget purus. Suspendisse pellentesque at ligula ut accumsan.';
+const p2 = 'Lorem ipsum dolor sit';
+export const Default = {
+    render: () => (_jsx(Column, { children: _jsx(ReadMore, Object.assign({ sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM }, { children: p1 })) })),
+};
+export const NotTruncated = {
+    render: () => (_jsx(Column, { children: _jsx(ReadMore, Object.assign({ sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM }, { children: p2 })) })),
+};
+export const CustomColor = {
+    render: () => (_jsx(Column, { children: _jsx(ReadMore, Object.assign({ lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, sx: {
+                color: COLOR.BACKGROUND,
+                bg: COLOR.PRIMARY,
+                width: '250px',
+            } }, { children: p1 })) })),
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyledElementProps } from '../../../../theme';
+import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
+export declare const useLinesHeight: (args: {
+    lines: number;
+    typography: TYPOGRAPHY_TYPE;
+}) => string;
+export declare const ReadMore: React.FC<StyledElementProps<HTMLDivElement, {
+    typography: TYPOGRAPHY_TYPE;
+    lines: number;
+    fixedHeight?: boolean;
+}, string>>;

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

@@ -0,0 +1,71 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import React, { useState } from 'react';
+import { useTheme } from '../../../../theme';
+import { COLOR, colors } from '../../../../theme/colors';
+import { getTypographyStyles, } from '../../../../theme/typography';
+import { useMediaQuery } from '../../../providers/media';
+const ReadMoreLink = (props) => {
+    const bg = colors[props.bg || COLOR.BACKGROUND];
+    const color = colors[props.color || COLOR.ND_BLUE_LIGHT];
+    return (_jsx("div", Object.assign({ css: {
+            whiteSpace: 'nowrap',
+            position: 'absolute',
+            right: 0,
+            bottom: 0,
+            paddingLeft: '3rem',
+            background: `linear-gradient(to right, ${bg}00, ${bg} 30%, ${bg} 100%)`,
+        } }, { children: _jsx("div", Object.assign({ "aria-hidden": "true", sx: {
+                color,
+                transform: 'scale(0.9)',
+                cursor: 'pointer',
+            } }, { children: "Read More..." })) })));
+};
+export const useLinesHeight = (args) => {
+    const theme = useTheme();
+    const styles = getTypographyStyles(args.typography);
+    const fontSize = styles.fontSize;
+    const fontSizeRem = theme.fontSizes[fontSize];
+    const fontSizeNumber = Number(fontSizeRem.slice(0, fontSizeRem.length - 3));
+    const linesHeight = fontSizeNumber * theme.lineHeights[styles.lineHeight] * args.lines;
+    return `${linesHeight}rem`;
+};
+export const ReadMore = (_a) => {
+    var { typography, sx, role, lines, fixedHeight, children } = _a, rest = __rest(_a, ["typography", "sx", "role", "lines", "fixedHeight", "children"]);
+    const ref = React.useRef(null);
+    const [showEllipsis, setShowEllipsis] = useState(true);
+    const wrapperHeight = useLinesHeight({ typography, lines });
+    const { screenSize } = useMediaQuery();
+    const { color, bg } = sx || {};
+    React.useEffect(() => {
+        if (ref.current) {
+            if (fixedHeight) {
+                ref.current.style.height = wrapperHeight;
+            }
+            else {
+                ref.current.style.maxHeight = wrapperHeight;
+            }
+            const isOverflowing = ref.current.scrollHeight > ref.current.clientHeight;
+            if (isOverflowing) {
+                setShowEllipsis(true);
+            }
+            else {
+                setShowEllipsis(false);
+            }
+        }
+    }, [children, wrapperHeight, fixedHeight, screenSize]);
+    return (_jsxs("div", Object.assign({ role: role || 'paragraph', ref: ref, style: {
+            overflow: 'hidden',
+            position: 'relative',
+        }, sx: Object.assign(Object.assign({}, getTypographyStyles(typography)), sx) }, rest, { children: [children, showEllipsis && _jsx(ReadMoreLink, { bg: bg, color: color })] })));
+};

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

@@ -0,0 +1,41 @@
+import React from 'react';
+export declare enum ALERT_TYPE {
+    INFORMATIONAL = "Informational",
+    INFORMATIONAL_YELLOW = "Informational_Yellow",
+    WARNING = "Warning"
+}
+export declare enum ALERT_DOMAIN {
+    LIBRARY = "library",
+    PRIMO = "primo",
+    PRIMO_NDU = "primoNDU",
+    PRIMO_HCC = "primoHCC",
+    ILLIAD = "illiad",
+    CATALOGUE_CLASSIC_NDU = "catalogueClassicNDU",
+    CATALOGUE_CLASSIC_HCC = "catalogueClassicHCC"
+}
+export type AlertProperties = {
+    uuid: string;
+    title: string;
+    type: ALERT_TYPE;
+    description: string;
+    domains: ALERT_DOMAIN[];
+    global?: boolean;
+    key?: number | null;
+};
+export type StrapiAlertAttributes = {
+    attributes: AlertProperties;
+};
+export type AlertQueryParams = {
+    domain?: ALERT_DOMAIN;
+    endpoint?: string;
+    startTime?: string;
+    endTime?: string;
+    disable?: boolean;
+};
+type AlertsProviderProps = React.PropsWithChildren<AlertQueryParams>;
+export declare const AlertsProvider: React.FC<AlertsProviderProps>;
+export declare const useAlerts: (pageAlerts?: string[]) => {
+    alerts: AlertProperties[];
+    dismiss: (id: string) => void;
+};
+export {};

package/dist/components/providers/alerts.js

@@ -0,0 +1,133 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { useStorage } from '../../utils/hooks/useStorage';
+const DISMISSED_ALERTS_STORAGE_KEY = 'DISSMISSED_ALERTS_STORAGE_KEY';
+export var ALERT_TYPE;
+(function (ALERT_TYPE) {
+    ALERT_TYPE["INFORMATIONAL"] = "Informational";
+    ALERT_TYPE["INFORMATIONAL_YELLOW"] = "Informational_Yellow";
+    ALERT_TYPE["WARNING"] = "Warning";
+})(ALERT_TYPE || (ALERT_TYPE = {}));
+export var ALERT_DOMAIN;
+(function (ALERT_DOMAIN) {
+    ALERT_DOMAIN["LIBRARY"] = "library";
+    ALERT_DOMAIN["PRIMO"] = "primo";
+    ALERT_DOMAIN["PRIMO_NDU"] = "primoNDU";
+    ALERT_DOMAIN["PRIMO_HCC"] = "primoHCC";
+    ALERT_DOMAIN["ILLIAD"] = "illiad";
+    ALERT_DOMAIN["CATALOGUE_CLASSIC_NDU"] = "catalogueClassicNDU";
+    ALERT_DOMAIN["CATALOGUE_CLASSIC_HCC"] = "catalogueClassicHCC";
+})(ALERT_DOMAIN || (ALERT_DOMAIN = {}));
+const composeGraphqlQuery = ({ startTime, endTime, }) => {
+    return JSON.stringify({
+        query: `
+      query AlertQuery($startTime: DateTime, $endTime: DateTime) {
+        alerts(
+          filters: {
+            startTime: { lte: $startTime }
+            endTime: { gte: $endTime }
+          }
+          pagination: { start: 0, limit: 100 }
+          sort: ["type:desc", "startTime:asc"]
+        ) {
+          data {
+            attributes {
+              uuid
+              title
+              description
+              type
+              global
+              domains
+            }
+          }
+        }
+      }
+    `,
+        variables: {
+            startTime: startTime,
+            endTime: endTime,
+        },
+    });
+};
+const DEFAULT_DATE = new Date().toISOString();
+const useAlertsQuery = ({ domain = ALERT_DOMAIN.LIBRARY, endpoint = DEFAULT_ENDPOINT, startTime = DEFAULT_DATE, endTime = DEFAULT_DATE, disable = false, }) => {
+    const [alerts, setAlerts] = useState([]);
+    useEffect(() => {
+        const fetchData = () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c;
+            try {
+                const myHeaders = new Headers();
+                myHeaders.append('Content-Type', 'application/json');
+                const response = yield fetch(endpoint, {
+                    method: 'POST',
+                    headers: myHeaders,
+                    body: composeGraphqlQuery({
+                        startTime,
+                        endTime,
+                    }),
+                    redirect: 'follow',
+                });
+                const json = yield response.json();
+                const results = (_c = (_b = (_a = json === null || json === void 0 ? void 0 : json.data) === null || _a === void 0 ? void 0 : _a.alerts) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.map((a) => a === null || a === void 0 ? void 0 : a.attributes);
+                setAlerts(results);
+            }
+            catch (error) {
+                console.log('error', error);
+            }
+        });
+        if (!disable) {
+            fetchData();
+        }
+    }, [endpoint, domain, startTime, endTime, disable]);
+    return alerts;
+};
+const AlertsContext = React.createContext({
+    alerts: [],
+    dismiss: () => { },
+});
+const DEFAULT_ENDPOINT = 'https://library-website-cms.library.nd.edu/graphql';
+export const AlertsProvider = ({ domain = ALERT_DOMAIN.LIBRARY, endpoint, startTime, endTime, children, disable, }) => {
+    const alerts = useAlertsQuery({
+        domain,
+        endpoint,
+        startTime,
+        endTime,
+        disable,
+    });
+    const storage = useStorage(`alert-storage-${domain}`);
+    const storedDismissedAlerts = storage.getItem(DISMISSED_ALERTS_STORAGE_KEY);
+    const [dismissedAlerts, setDismissedAlerts] = useState(storedDismissedAlerts ? JSON.parse(storedDismissedAlerts) : []);
+    const dismiss = (id) => {
+        if (!dismissedAlerts.includes(id)) {
+            const newDismissed = dismissedAlerts.concat([id]);
+            storage.setItem(DISMISSED_ALERTS_STORAGE_KEY, JSON.stringify(newDismissed));
+            setDismissedAlerts(newDismissed);
+        }
+    };
+    const filteredAlerts = alerts
+        .filter((alert) => !dismissedAlerts.includes(alert.uuid))
+        .filter((alert) => alert.domains.includes(domain));
+    return (_jsx(AlertsContext.Provider, Object.assign({ value: {
+            alerts: filteredAlerts,
+            dismiss,
+        } }, { children: children })));
+};
+export const useAlerts = (pageAlerts) => {
+    const { alerts: allAlerts, dismiss } = React.useContext(AlertsContext);
+    const alerts = pageAlerts
+        ? allAlerts.filter((alert) => alert.global || pageAlerts.includes(alert.uuid))
+        : allAlerts.filter((alert) => alert.global);
+    return {
+        alerts,
+        dismiss,
+    };
+};

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

@@ -0,0 +1,25 @@
+import { PropsWithChildren } from 'react';
+import { DeepPartial } from '../../utils/misc';
+import { StyledElementProps } from '../../theme';
+export type ComponentConfig = {
+    link: {
+        externalMatcher: RegExp;
+        navigate: (url: string) => void;
+        internalLinkComponent: React.FC<LinkComponentProps>;
+        externalLinkComponent: React.FC<LinkComponentProps>;
+    };
+    modal: {
+        appElement: HTMLElement | undefined;
+    };
+};
+export type ComponentConfigParam = DeepPartial<ComponentConfig>;
+export type LinkComponentProps = StyledElementProps<HTMLAnchorElement, {
+    to: string;
+    target?: string;
+}>;
+export declare const DefaultLink: React.FC<LinkComponentProps>;
+export declare const ComponentConfigContext: import("react").Context<ComponentConfig>;
+export declare const useComponentConfig: () => ComponentConfig;
+export declare const ComponentConfigProvider: React.FC<PropsWithChildren<{
+    config: ComponentConfigParam;
+}>>;

package/dist/components/providers/componentConfig.js

@@ -0,0 +1,37 @@
+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 "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+const DEFAULT_EXTERNAL_LINK_MATCHER = /[a-zA-Z0-9]*:\/\/[^\s]*/g;
+export const DefaultLink = (_a) => {
+    var { to } = _a, rest = __rest(_a, ["to"]);
+    return _jsx("a", Object.assign({ href: to }, rest));
+};
+const defaultComponentConfig = {
+    link: {
+        externalMatcher: DEFAULT_EXTERNAL_LINK_MATCHER,
+        navigate: (url) => {
+            window.location.href = url;
+        },
+        internalLinkComponent: DefaultLink,
+        externalLinkComponent: DefaultLink,
+    },
+    modal: {
+        appElement: undefined,
+    },
+};
+export const ComponentConfigContext = createContext(defaultComponentConfig);
+export const useComponentConfig = () => useContext(ComponentConfigContext);
+export const ComponentConfigProvider = ({ config: configParam, children }) => {
+    const config = useMemo(() => (Object.assign(Object.assign(Object.assign({}, defaultComponentConfig), configParam), { link: Object.assign(Object.assign({}, defaultComponentConfig.link), configParam.link) })), []);
+    return (_jsx(ComponentConfigContext.Provider, Object.assign({ value: config }, { children: children })));
+};

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

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+export declare enum ENVIRONMENT {
+    DEV = "DEVELOPMENT",
+    PROD = "PRODUCTION"
+}
+type EnvironmentContextType = {
+    env?: ENVIRONMENT;
+    flagInDevelopment: (message: string) => void;
+};
+export declare const useEnvironment: () => EnvironmentContextType;
+export declare const EnvironmentProvider: React.FC<PropsWithChildren<{
+    env?: ENVIRONMENT;
+}>>;
+export {};

package/dist/components/providers/env.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+export var ENVIRONMENT;
+(function (ENVIRONMENT) {
+    ENVIRONMENT["DEV"] = "DEVELOPMENT";
+    ENVIRONMENT["PROD"] = "PRODUCTION";
+})(ENVIRONMENT || (ENVIRONMENT = {}));
+const EnvironmentContext = createContext({
+    flagInDevelopment: () => { },
+});
+export const useEnvironment = () => useContext(EnvironmentContext);
+export const EnvironmentProvider = ({ env, children }) => {
+    const flagInDevelopment = (message) => {
+        if (env === ENVIRONMENT.DEV) {
+            throw new Error(message);
+        }
+        else {
+            console.warn(message);
+        }
+    };
+    return (_jsx(EnvironmentContext.Provider, Object.assign({ value: {
+            env,
+            flagInDevelopment,
+        } }, { children: children })));
+};

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]);
+    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/menu.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+export declare enum MENU_ACTION_TYPE {
+    SUBMENU = "SUBMENU",
+    LINK = "LINK"
+}
+export declare enum MENU_ORIENTATION {
+    HORIZONTAL = "HORIZONTAL",
+    VERTICAL = "VERTICAL"
+}
+type SubmenuAction = {
+    type: MENU_ACTION_TYPE.SUBMENU;
+    submenu: Menu;
+};
+type LinkAction = {
+    type: MENU_ACTION_TYPE.LINK;
+    to: string;
+};
+type Action = SubmenuAction | LinkAction;
+type MenuItem = {
+    id: string;
+    label: string;
+    action: Action;
+};
+export type Menu = {
+    orientation: MENU_ORIENTATION;
+    items: MenuItem[];
+};
+type Path = string[];
+type HtmlAttributes = Omit<React.HTMLAttributes<any>, 'color'>;
+type MenuContextType = {
+    menu: Menu;
+    activePath: Path;
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    getMenuItem: (path: Path) => MenuItem | undefined;
+    getMenuItemProps: (path: Path) => HtmlAttributes;
+    getMenuProps: (path?: Path) => HtmlAttributes;
+};
+type MenuProviderProps = {
+    menu: Menu;
+    children: React.ReactNode | ((context: MenuContextType) => React.ReactNode);
+};
+export declare const useMenu: () => MenuContextType;
+export declare const MenuProvider: React.FC<MenuProviderProps>;
+export {};