@ndlib/component-library 0.0.36 → 0.0.38

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

@@ -24,6 +24,7 @@ type ButtonProps = StyledElementProps<HTMLButtonElement, {
     accessibleLabel?: string;
     loading?: boolean;
     disabled?: boolean;
+    disableFocusStyles?: boolean;
 }>;
 export declare const Button: React.ForwardRefExoticComponent<{
     sx?: import("../../../theme").StylesProp | undefined;
@@ -40,6 +41,7 @@ export declare const Button: React.ForwardRefExoticComponent<{
     accessibleLabel?: string | undefined;
     loading?: boolean | undefined;
     disabled?: boolean | undefined;
+    disableFocusStyles?: boolean | undefined;
 } & {
     htmlFor?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

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

@@ -52,7 +52,7 @@ export var BUTTON_TYPE;
     // ARROW
 })(BUTTON_TYPE || (BUTTON_TYPE = {}));
 export const Button = React.forwardRef((_a, ref) => {
-    var { size: sizeParam, type: typeParam, color, customColor, textColor: textColorParam, primaryIcon, leftIcon, rightIcon, disabled: disabledParam, children, sx, loading } = _a, rest = __rest(_a, ["size", "type", "color", "customColor", "textColor", "primaryIcon", "leftIcon", "rightIcon", "disabled", "children", "sx", "loading"]);
+    var { size: sizeParam, type: typeParam, color, customColor, textColor: textColorParam, primaryIcon, leftIcon, rightIcon, disabled: disabledParam, children, sx, loading, disableFocusStyles } = _a, rest = __rest(_a, ["size", "type", "color", "customColor", "textColor", "primaryIcon", "leftIcon", "rightIcon", "disabled", "children", "sx", "loading", "disableFocusStyles"]);
     const disabled = disabledParam || loading;
     const theme = useTheme();
     const { flagInDevelopment } = useEnvironment();
@@ -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) {
@@ -126,7 +126,7 @@ export const Button = React.forwardRef((_a, ref) => {
         : undefined;
     return (_jsxs("button", Object.assign({ ref: ref, tabIndex: disabled ? -1 : 0, disabled: disabled, css: {
             backgroundColor: customColor,
-        }, sx: Object.assign(Object.assign({ cursor, bg: customColor ? undefined : bg, color: textColor, px: paddingX, width: width, height: height, border: 'solid 1px', borderRadius: '4px', borderColor, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', ':hover': hoverStyles, ':focus': hoverStyles }, typographyStyles), sx) }, rest, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: textColor })), _jsx("div", Object.assign({ css: {
+        }, sx: Object.assign(Object.assign({ cursor, bg: customColor ? undefined : bg, color: textColor, px: paddingX, width: width, height: height, border: 'solid 1px', borderRadius: '4px', borderColor, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', ':hover': !disableFocusStyles ? hoverStyles : {}, ':focus': !disableFocusStyles ? hoverStyles : {} }, typographyStyles), sx) }, rest, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: textColor })), _jsx("div", Object.assign({ css: {
                     flexGrow: 1,
                     justifyContent: 'flex-start',
                     textOverflow: 'ellipsis',

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof Select>;
 export declare const Default: Story;
 export declare const WithLabel: Story;
+export declare const InvertedColors: Story;

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

@@ -6,6 +6,7 @@ import { useState } from 'react';
 import { Column } from '../../layout/Column';
 import { Group } from '../../Group';
 import { Heading, HEADING_SIZE } from '../../text/Heading';
+import { COLOR } from '../../../../theme/colors';
 const meta = {
     title: 'Elements/Fields/Select',
     component: Select,
@@ -33,3 +34,6 @@ export const Default = {
 export const WithLabel = {
     render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) })),
 };
+export const InvertedColors = {
+    render: () => (_jsx(Column, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 4 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, inverted: true, label: "Fruit" })] }))) }))),
+};

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

@@ -1,17 +1,19 @@
+/** @jsxImportSource theme-ui */
 import React from 'react';
 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;
+    inverted?: boolean;
     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 declare function Select<Value extends Key, Option extends BasicOption<Value>>({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, inverted, renderOptionLabel: renderOptionLabelParam, sx, }: SelectProps<Value, Option>): React.JSX.Element;
 export {};

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

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+/** @jsxImportSource theme-ui */
 import { useMemo, useState } from 'react';
 import _ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { useFloating, size as sizeMiddleware, offset, autoPlacement, } from '@floating-ui/react';
@@ -30,7 +31,7 @@ const buttonSizeMap = {
     [INPUT_SIZE.LG]: BUTTON_SIZE.LG,
 };
 const DEFAULT_WIDTH = '16rem';
-export function Select({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, renderOptionLabel: renderOptionLabelParam, sx, }) {
+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');
@@ -116,16 +117,56 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
     const renderOptionLabel = renderOptionLabelParam || defaultRenderOptionLabel;
-    return (_jsxs(Box, Object.assign({ sx: { position: 'relative' } }, { children: [_jsx(Label, Object.assign({ htmlFor: inputId, typography: labelTypographyMap[size], sx: {
+    const focusStyles = {
+        boxShadow: inverted ? theme.boxShadow.INVERTED : theme.boxShadow.NORMAL,
+    };
+    return (_jsxs(Box, Object.assign({ sx: {
+            width: DEFAULT_WIDTH,
+            position: 'relative',
+            borderRadius: '4px',
+            backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE,
+            ':hover fieldset': focusStyles,
+            ':focus fieldset': focusStyles,
+        } }, { children: [_jsx("fieldset", Object.assign({ sx: {
+                    textAlign: 'left',
+                    position: 'absolute',
+                    inset: '-5px 0px 0px 0px',
+                    margin: '0px',
+                    padding: '0px 0.5rem',
+                    pointerEvents: 'none',
+                    borderRadius: 'inherit',
+                    borderStyle: 'solid',
+                    borderWidth: '1px',
+                    overflow: 'hidden',
+                    minWidth: '0%',
+                    borderColor: inverted ? COLOR.GRAY : COLOR.LIGHT_GRAY,
+                    zIndex: theme.zIndex.LABEL,
+                } }, { children: _jsx("legend", Object.assign({ style: {
+                        width: 'auto',
+                        float: 'unset',
+                        overflow: 'hidden',
+                        position: 'relative',
+                        display: 'block',
+                        padding: '0',
+                        height: '8px',
+                        fontSize: '0.75em',
+                        visibility: 'hidden',
+                        whiteSpace: 'nowrap',
+                    } }, { children: label && (_jsx(Label, Object.assign({ standalone: true, sx: {
+                            px: 1,
+                            position: 'relative',
+                            display: 'inline-flex',
+                            opacity: '0',
+                            visibility: 'hidden',
+                        }, typography: labelTypographyMap[size] }, { children: label }))) })) })), _jsx(Label, Object.assign({ htmlFor: inputId, typography: labelTypographyMap[size], sx: {
                     position: 'absolute',
-                    color: COLOR.ND_PROVOST_BLUE,
-                    backgroundColor: COLOR.WHITE,
                     left: '0.5rem',
                     lineHeight: 1,
                     zIndex: theme.zIndex.LABEL,
-                    px: size === INPUT_SIZE.SM ? 1 : 2,
+                    color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.PRIMARY,
+                    px: 1,
                     top: labelOffsetMap[size],
-                } }, { children: label })), _jsx(Button, Object.assign({ ref: refs.setReference, 
+                } }, { children: label })), _jsx(Button, Object.assign({ ref: refs.setReference, disableFocusStyles: true, 
                 // A11y attributes
                 role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
                     ? getOptionId(stagedOptionValue)
@@ -138,14 +179,15 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     else {
                         close();
                     }
-                }, sx: Object.assign(Object.assign({ height, width: DEFAULT_WIDTH, border: 'solid 1px', borderColor: COLOR.GRAY, borderRadius: '4px', flexDirection: 'row', alignItems: 'center', position: 'relative', ':hover': {
-                        boxShadow: theme.boxShadow.NORMAL,
-                    }, ':focus': {
-                        boxShadow: theme.boxShadow.NORMAL,
-                    } }, typographyStyles), sx), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
+                }, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: Object.assign(Object.assign({ height, width: '100%', border: 'solid 0px', 
+                    // borderColor: COLOR.GRAY,
+                    // borderRadius: '4px',
+                    flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: theme.zIndex.NORMAL, background: 'none' }, typographyStyles), sx), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
                     onSelectOption && onSelectOption(option.value);
                     close();
                 }, ref: refs.setFloating, renderOption: renderOption, sx: {
                     zIndex: theme.zIndex.DROPDOWN,
-                }, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { zIndex: 1 }) }))] })));
+                }, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { boxShadow: inverted
+                        ? theme.boxShadow.INVERTED
+                        : theme.boxShadow.NORMAL }) }))] })));
 }

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof TextInput>;
 export declare const Default: Story;
 export declare const WithLabel: Story;
+export declare const Inverted: Story;

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

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { Column } from '../../layout/Column';
 import { Group } from '../../Group';
 import { Heading, HEADING_SIZE } from '../../text/Heading';
+import { COLOR } from '../../../../theme/colors';
 const meta = {
     title: 'Elements/Fields/TextInput',
     component: TextInput,
@@ -24,5 +25,8 @@ export const Default = {
     render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", sx: { mt: 2 } })] }))) })),
 };
 export const WithLabel = {
-    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, label: "Search", sx: { mt: 2 } })] }))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, label: "Search", placeholder: "Placeholder", sx: { mt: 2 } })] }))) })),
+};
+export const Inverted = {
+    render: () => (_jsx(Column, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 2 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", label: "Search", inverted: true, sx: { mt: 2 } })] }))) }))),
 };

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

@@ -21,6 +21,7 @@ export type TextInputProps = StyledElementProps<HTMLInputElement, {
     size?: INPUT_SIZE;
     leftIcon?: React.FC<any>;
     inline?: boolean;
+    inverted?: boolean;
     label?: string;
     value: string;
     onChange?: (value: string) => void;
@@ -33,6 +34,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     size?: INPUT_SIZE | undefined;
     leftIcon?: React.FC<any> | undefined;
     inline?: boolean | undefined;
+    inverted?: boolean | undefined;
     label?: string | undefined;
     value: string;
     onChange?: ((value: string) => void) | undefined;

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

@@ -50,7 +50,7 @@ const defaultHeight = {
     [INPUT_SIZE.LG]: '3rem',
 };
 export const TextInput = React.forwardRef((_a, ref) => {
-    var { value, label, onChange, onChangeRaw, onClick, inline, size: sizeParam, leftIcon, sx } = _a, rest = __rest(_a, ["value", "label", "onChange", "onChangeRaw", "onClick", "inline", "size", "leftIcon", "sx"]);
+    var { value, label, onChange, onChangeRaw, onClick, inline, inverted, size: sizeParam, leftIcon, sx } = _a, rest = __rest(_a, ["value", "label", "onChange", "onChangeRaw", "onClick", "inline", "inverted", "size", "leftIcon", "sx"]);
     const id = useUniqueHtmlId('text-input');
     const theme = useTheme();
     const size = sizeParam || INPUT_SIZE.MD;
@@ -59,27 +59,58 @@ export const TextInput = React.forwardRef((_a, ref) => {
     const height = defaultHeight[size];
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
+    const focusStyles = {
+        boxShadow: inverted ? theme.boxShadow.INVERTED : theme.boxShadow.NORMAL,
+    };
     return (_jsxs("div", Object.assign({ ref: ref, onClick: onClick, id: id, sx: Object.assign(Object.assign({ height,
-            display, px: paddingX, border: 'solid 1px', borderColor: COLOR.GRAY, borderRadius: '4px', flexDirection: 'row', position: 'relative', alignItems: 'center', ':hover': {
-                boxShadow: theme.boxShadow.NORMAL,
-            }, ':focus': {
-                boxShadow: theme.boxShadow.NORMAL,
-            } }, typographyStyles), sx) }, { children: [leftIcon && (_jsx(Icon, { icon: leftIcon, sx: {
+            display, px: paddingX, backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, borderRadius: '4px', flexDirection: 'row', position: 'relative', alignItems: 'center', ':hover': focusStyles, ':focus': focusStyles }, typographyStyles), sx) }, { children: [_jsx("fieldset", Object.assign({ sx: {
+                    textAlign: 'left',
+                    position: 'absolute',
+                    inset: '-5px 0px 0px 0px',
+                    margin: '0px',
+                    padding: '0px 0.5rem',
+                    pointerEvents: 'none',
+                    borderRadius: 'inherit',
+                    borderStyle: 'solid',
+                    borderWidth: '1px',
+                    overflow: 'hidden',
+                    minWidth: '0%',
+                    borderColor: inverted ? COLOR.GRAY : COLOR.LIGHT_GRAY,
+                    zIndex: theme.zIndex.LABEL,
+                }, "aria-ignore": true }, { children: _jsx("legend", Object.assign({ style: {
+                        width: 'auto',
+                        float: 'unset',
+                        overflow: 'hidden',
+                        position: 'relative',
+                        display: 'block',
+                        padding: '0',
+                        height: '8px',
+                        fontSize: '0.75em',
+                        visibility: 'hidden',
+                        whiteSpace: 'nowrap',
+                    } }, { children: label && (_jsx(Label, Object.assign({ standalone: true, "aria-hidden": "true", sx: {
+                            px: 1,
+                            position: 'relative',
+                            display: 'inline-flex',
+                            opacity: '0',
+                            visibility: 'hidden',
+                        }, typography: labelTypographyMap[size] }, { children: label }))) })) })), leftIcon && (_jsx(Icon, { icon: leftIcon, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: {
                     mr: 2,
                     fontSize: getIconSize(typographyStyles.fontSize),
                 } })), _jsx("input", Object.assign({ value: value, onChange: (event) => {
                     onChange && onChange(event.target.value);
                     onChangeRaw && onChangeRaw(event);
-                }, sx: Object.assign(Object.assign({ px: 0, py: 0, width: '100%', border: 'none' }, typographyStyles), { ':focus': {
+                }, sx: Object.assign(Object.assign({ px: 0, py: 0, width: '100%', border: 'none', backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT }, typographyStyles), { '::placeholder': {
+                        color: inverted ? COLOR.LIGHT_GRAY : COLOR.GRAY,
+                    }, ':focus': {
                         outline: 'none',
                     } }) }, rest)), label && (_jsx(Label, Object.assign({ htmlFor: id, typography: labelTypographyMap[size], sx: {
                     position: 'absolute',
-                    color: COLOR.ND_PROVOST_BLUE,
-                    backgroundColor: COLOR.WHITE,
+                    color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.ND_PROVOST_BLUE,
                     left: '0.5rem',
                     lineHeight: 1,
                     zIndex: theme.zIndex.LABEL,
-                    px: size === INPUT_SIZE.SM ? 1 : 2,
+                    px: 1,
                     top: labelOffsetMap[size],
                 } }, { children: label })))] })));
 });

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

@@ -1,9 +1,11 @@
 export declare enum BOX_SHADOW {
     NORMAL = "0 0 8px #dfdfdf",
-    EMPHASIZED = "0 0 12px #d3d3d3"
+    EMPHASIZED = "0 0 12px #d3d3d3",
+    INVERTED = "0 0 8px #767676"
 }
 export declare enum Z_INDEX {
     NORMAL = 1,
     LABEL = 2,
-    DROPDOWN = 3
+    DROPDOWN = 3,
+    MODAL = 4
 }

package/dist/theme/custom.js

@@ -3,10 +3,12 @@ export var BOX_SHADOW;
 (function (BOX_SHADOW) {
     BOX_SHADOW["NORMAL"] = "0 0 8px #dfdfdf";
     BOX_SHADOW["EMPHASIZED"] = "0 0 12px #d3d3d3";
+    BOX_SHADOW["INVERTED"] = "0 0 8px #767676";
 })(BOX_SHADOW || (BOX_SHADOW = {}));
 export var Z_INDEX;
 (function (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.38",
   "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,
-    };
-};