@via-profit/ui-kit 0.3.0 → 0.5.0

package/esm/Menu/MenuContainer.js

@@ -0,0 +1,366 @@
+import React from 'react';
+import useContext, { actionSetmenuState } from './context';
+import List from './MenuList';
+import Popper from '../Popper';
+import ClickOutside from '../ClickOutside';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+const onRequestCloseDefault = () => undefined;
+const isEqual = (a, b) => {
+    if (a === b) {
+        return true;
+    }
+    if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
+        return false;
+    }
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length)
+        return false;
+    return keysA.every(key => Object.prototype.hasOwnProperty.call(b, key) && a[key] === b[key]);
+};
+const MenuContainer = React.forwardRef((props, ref) => {
+    const { items, value, anchorElement = null, overrides, children, closeOutsideClick = true, closeOnAnchorClick = false, isOpen = false, anchorPos = 'bottom', alternativePlacements = ['bottom', 'top'], positionStrategy, autoFlip, viewportMargin, offset, multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, onAnchorPosChanged, zIndex, onSelectItem, getOptionSelected, maxWidth, } = useThemeProps('Menu', props);
+    const overridesMap = React.useMemo(() => ({
+        List: (overrides === null || overrides === void 0 ? void 0 : overrides.List) || List,
+        Popper: (overrides === null || overrides === void 0 ? void 0 : overrides.Popper) || Popper,
+    }), [overrides === null || overrides === void 0 ? void 0 : overrides.List, overrides === null || overrides === void 0 ? void 0 : overrides.Popper]);
+    const menuListRef = React.useRef(null);
+    const menuPopperRef = React.useRef(null);
+    // Starts as `false` so that a menu mounted in the open state is focused and scrolled too
+    const isOpenRef = React.useRef(false);
+    const focusTimeoutRef = React.useRef();
+    // Whether the focus is inside the list: then it is returned to the anchor on close
+    const hasFocusRef = React.useRef(false);
+    // The parent often resets the anchor together with isOpen, so the last one is kept
+    const lastAnchorRef = React.useRef(anchorElement);
+    if (anchorElement) {
+        lastAnchorRef.current = anchorElement;
+    }
+    // Keyboard navigation scrolls the list under a still pointer, and the browser fires
+    // mouseenter on the item that appears under it. Such events must not move the highlight
+    const isKeyboardNavigationRef = React.useRef(false);
+    const { dispatch, state: { selectedIndexes, markedIndex, hoveredIndex }, } = useContext();
+    const selectedIndexesRef = React.useRef(selectedIndexes);
+    const compareFunc = React.useCallback((item, val) => getOptionSelected ? getOptionSelected({ item, value: val }) : isEqual(item, val), [getOptionSelected]);
+    // Оптимизированная функция получения выбранных индексов
+    const getSelectedIndexes = React.useCallback(() => {
+        if (value === null || (multiple && value.length === 0)) {
+            return [];
+        }
+        const indexes = [];
+        if (multiple) {
+            const valueArray = value;
+            items.forEach((item, index) => {
+                if (valueArray.some(val => compareFunc(item, val))) {
+                    indexes.push(index);
+                }
+            });
+        }
+        else {
+            const singleValue = value;
+            const index = items.findIndex(item => compareFunc(item, singleValue));
+            if (index !== -1) {
+                indexes.push(index);
+            }
+        }
+        return indexes;
+    }, [items, value, multiple, compareFunc]);
+    const scrollToIndex = React.useCallback((index) => {
+        if (index === -1) {
+            return;
+        }
+        const container = menuListRef.current;
+        const option = container === null || container === void 0 ? void 0 : container.children[index];
+        if (container && option) {
+            const containerRect = container.getBoundingClientRect();
+            const optionRect = option.getBoundingClientRect();
+            // Scroll only when the option is out of the visible area
+            if (optionRect.top < containerRect.top) {
+                container.scrollTop -= containerRect.top - optionRect.top;
+            }
+            else if (optionRect.bottom > containerRect.bottom) {
+                container.scrollTop += optionRect.bottom - containerRect.bottom;
+            }
+        }
+    }, []);
+    const scrollToFirstSelected = React.useCallback(() => {
+        // Computed from the props, the context state may not be updated yet
+        const indexes = getSelectedIndexes();
+        if (indexes.length === 0)
+            return;
+        const firstSelectedIndex = Math.min(...indexes);
+        dispatch(actionSetmenuState({ markedIndex: firstSelectedIndex }));
+        scrollToIndex(firstSelectedIndex);
+    }, [dispatch, getSelectedIndexes, scrollToIndex]);
+    const selectItem = React.useCallback((index) => {
+        if (index < 0 || index >= items.length)
+            return;
+        const item = items[index];
+        // Falsy items such as 0 or an empty string are valid options
+        if (item === undefined)
+            return;
+        if (typeof onSelectItem === 'function') {
+            if (multiple) {
+                // Для multiple режима
+                // Value entries may be other instances than items, so compare them by compareFunc
+                const currentValue = value || [];
+                const isSelected = currentValue.some(v => compareFunc(item, v));
+                const newValue = isSelected
+                    ? currentValue.filter(v => !compareFunc(item, v))
+                    : [...currentValue, item];
+                onSelectItem(newValue);
+            }
+            else {
+                // Для single режима
+                onSelectItem(item);
+            }
+            if (closeOnSelect) {
+                onRequestClose();
+            }
+        }
+    }, [onSelectItem, onRequestClose, compareFunc, closeOnSelect, items, value, multiple]);
+    const highlightIndex = React.useCallback((index) => {
+        const validIndex = Math.max(-1, Math.min(index, items.length - 1));
+        isKeyboardNavigationRef.current = true;
+        // Always dispatched: markedIndex of this closure can be outdated (e.g. the items effect
+        // has just reset it), the reducer skips the update when nothing changes.
+        // The mouse and the keyboard share one highlight
+        dispatch(actionSetmenuState({ markedIndex: validIndex, hoveredIndex: -1 }));
+        scrollToIndex(validIndex);
+    }, [dispatch, items.length, scrollToIndex]);
+    const highlightPrevItem = React.useCallback(() => {
+        const newIndex = markedIndex - 1;
+        highlightIndex(newIndex >= 0 ? newIndex : 0);
+    }, [markedIndex, highlightIndex]);
+    const highlightNextItem = React.useCallback(() => {
+        const newIndex = markedIndex + 1;
+        highlightIndex(newIndex < items.length ? newIndex : items.length - 1);
+    }, [markedIndex, items.length, highlightIndex]);
+    const highlightFirstItem = React.useCallback(() => {
+        highlightIndex(0);
+    }, [highlightIndex]);
+    const highlightLastItem = React.useCallback(() => {
+        highlightIndex(items.length - 1);
+    }, [highlightIndex, items.length]);
+    const selectHighlightedItem = React.useCallback(() => {
+        if (markedIndex > -1 && markedIndex < items.length) {
+            selectItem(markedIndex);
+        }
+    }, [markedIndex, selectItem, items.length]);
+    // API ref
+    React.useImperativeHandle(ref, () => ({
+        focus: () => { var _a; return (_a = menuListRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        scrollToIndex: (idx) => scrollToIndex(idx),
+        highlightIndex: (idx) => highlightIndex(idx),
+        highlightPrevItem: () => highlightPrevItem(),
+        highlightNextItem: () => highlightNextItem(),
+        highlightFirstItem: () => highlightFirstItem(),
+        highlightLastItem: () => highlightLastItem(),
+        scrollToFirstSelected: () => scrollToFirstSelected(),
+        selectHighlightedItem: () => selectHighlightedItem(),
+        selectItem: (idx) => selectItem(idx),
+        getListElement: () => menuListRef.current,
+        // setActualPlacement: placement => setActualPlacement(placement),
+    }), [
+        scrollToIndex,
+        highlightIndex,
+        highlightPrevItem,
+        highlightNextItem,
+        highlightFirstItem,
+        highlightLastItem,
+        selectHighlightedItem,
+        scrollToFirstSelected,
+        selectItem,
+    ]);
+    // Обработчик клавиатуры
+    const listKeydownEvent = React.useCallback((event) => {
+        switch (event.code) {
+            case 'Enter':
+            case 'NumpadEnter':
+                event.preventDefault();
+                if (markedIndex > -1 && markedIndex < items.length) {
+                    selectItem(markedIndex);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                highlightPrevItem();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                highlightNextItem();
+                break;
+            case 'Home':
+                event.preventDefault();
+                highlightFirstItem();
+                break;
+            case 'End':
+                event.preventDefault();
+                highlightLastItem();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                onRequestClose(event);
+                break;
+            case 'Tab':
+                // The list is rendered in a portal at the end of the page, so the next Tab stop
+                // would be lost: close the menu instead, the focus returns to the anchor
+                event.preventDefault();
+                onRequestClose(event);
+                break;
+            default:
+                break;
+        }
+    }, [
+        markedIndex,
+        items.length,
+        selectItem,
+        highlightPrevItem,
+        highlightNextItem,
+        highlightFirstItem,
+        highlightLastItem,
+        onRequestClose,
+    ]);
+    // Управление открытием/закрытием меню
+    React.useEffect(() => {
+        var _a;
+        if (isOpenRef.current === isOpen)
+            return;
+        isOpenRef.current = isOpen;
+        if (!isOpen) {
+            // The menu is already closed by the parent, so onRequestClose must not be called again
+            dispatch(actionSetmenuState({ markedIndex: -1, hoveredIndex: -1 }));
+            // Otherwise the focus is lost together with the unmounted list
+            if (hasFocusRef.current) {
+                hasFocusRef.current = false;
+                (_a = lastAnchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            return;
+        }
+        // При открытии
+        scrollToFirstSelected();
+        if (focusTimeoutRef.current) {
+            clearTimeout(focusTimeoutRef.current);
+        }
+        // A menu mounted in the open state gets its list only after the portal is mounted,
+        // so the scroll is repeated when the list surely exists
+        focusTimeoutRef.current = setTimeout(() => {
+            var _a;
+            scrollToFirstSelected();
+            if (autofocus) {
+                (_a = menuListRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }, 15);
+    }, [isOpen, autofocus, dispatch, scrollToFirstSelected]);
+    // Обновление выбранных индексов
+    React.useEffect(() => {
+        const indexes = getSelectedIndexes();
+        // Сравниваем массивы эффективно
+        const hasChanged = selectedIndexesRef.current.length !== indexes.length ||
+            selectedIndexesRef.current.some((value, idx) => value !== indexes[idx]);
+        if (hasChanged) {
+            selectedIndexesRef.current = indexes;
+            dispatch({
+                type: 'setMenuState',
+                payload: { selectedIndexes: indexes },
+            });
+        }
+    }, [getSelectedIndexes, dispatch]);
+    // The highlight is an index, so when the items change it follows the same item
+    // or is removed. Otherwise a filtered list highlights a random item at the old index
+    const prevItemsRef = React.useRef(items);
+    const markedIndexRef = React.useRef(markedIndex);
+    markedIndexRef.current = markedIndex;
+    React.useEffect(() => {
+        const prevItems = prevItemsRef.current;
+        prevItemsRef.current = items;
+        // A new array with the same items (e.g. `items={list.filter(...)}`) is not a change
+        const isSameList = prevItems.length === items.length && prevItems.every((item, i) => item === items[i]);
+        if (isSameList) {
+            return;
+        }
+        const prevIndex = markedIndexRef.current;
+        const markedItem = prevIndex === -1 ? undefined : prevItems[prevIndex];
+        const newIndex = markedItem === undefined
+            ? -1
+            : items.findIndex(item => item === markedItem || compareFunc(item, markedItem));
+        if (newIndex !== prevIndex) {
+            dispatch(actionSetmenuState({ markedIndex: newIndex, hoveredIndex: -1 }));
+        }
+        // The old scroll position means nothing for the new list
+        if (newIndex === -1) {
+            if (menuListRef.current) {
+                menuListRef.current.scrollTop = 0;
+            }
+        }
+        else {
+            scrollToIndex(newIndex);
+        }
+    }, [items, compareFunc, dispatch, scrollToIndex]);
+    const itemClickHandler = React.useCallback((index) => () => selectItem(index), [selectItem]);
+    // The hovered item becomes the highlighted one, so the keyboard continues from it
+    // and Enter selects it
+    const itemMouseEnterHandler = React.useCallback((index) => () => {
+        if (isKeyboardNavigationRef.current) {
+            return;
+        }
+        if (index !== markedIndex || index !== hoveredIndex) {
+            dispatch(actionSetmenuState({ hoveredIndex: index, markedIndex: index }));
+        }
+    }, [dispatch, hoveredIndex, markedIndex]);
+    const itemMouseLeaveHandler = React.useCallback((index) => () => {
+        if (index === hoveredIndex) {
+            dispatch(actionSetmenuState({ hoveredIndex: -1 }));
+        }
+    }, [dispatch, hoveredIndex]);
+    // A real pointer movement ends the keyboard navigation
+    const listMouseMoveHandler = React.useCallback(() => {
+        isKeyboardNavigationRef.current = false;
+    }, []);
+    const listFocusHandler = React.useCallback(() => {
+        hasFocusRef.current = true;
+    }, []);
+    const listBlurHandler = React.useCallback((event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+            hasFocusRef.current = false;
+        }
+    }, []);
+    const onAnchorPosChangedMemo = React.useCallback((newPlacement) => {
+        if (typeof onAnchorPosChanged === 'function') {
+            onAnchorPosChanged(newPlacement);
+        }
+    }, [onAnchorPosChanged]);
+    const renderedChildren = React.useMemo(() => items.map((item, index) => children({ item, index }, {
+        key: index,
+        onMouseEnter: itemMouseEnterHandler(index),
+        // mouseenter is skipped during the keyboard navigation, so the item under a moving
+        // pointer is highlighted by mousemove
+        onMouseMove: itemMouseEnterHandler(index),
+        onMouseLeave: itemMouseLeaveHandler(index),
+        onClick: itemClickHandler(index),
+        selected: selectedIndexes.includes(index),
+        hovered: markedIndex === index,
+    })), [
+        items,
+        children,
+        selectedIndexes,
+        markedIndex,
+        itemMouseEnterHandler,
+        itemMouseLeaveHandler,
+        itemClickHandler,
+    ]);
+    // Cleanup on unmount
+    React.useEffect(() => () => {
+        if (focusTimeoutRef.current) {
+            clearTimeout(focusTimeoutRef.current);
+        }
+    }, []);
+    // Мемоизация компонентов
+    const PopperComponent = overridesMap.Popper;
+    const ListComponent = overridesMap.List;
+    return (React.createElement(ClickOutside, { onOutsideClick: onRequestClose, mouseEvent: isOpen && closeOutsideClick ? 'onMouseDown' : false, ignoreElements: closeOnAnchorClick ? undefined : [anchorElement] },
+        React.createElement(PopperComponent, { isOpen: Boolean(isOpen), ref: menuPopperRef, zIndex: zIndex, anchorPos: anchorPos, alternativePlacements: alternativePlacements, anchorElement: anchorElement, onAnchorPosChanged: onAnchorPosChangedMemo, positionStrategy: positionStrategy, autoFlip: autoFlip, viewportMargin: viewportMargin, offset: offset },
+            React.createElement(ListComponent, { anchorPos: anchorPos, isOpen: Boolean(isOpen), ref: menuListRef, maxWidth: maxWidth, onKeyDown: listKeydownEvent, onMouseMoveCapture: listMouseMoveHandler, onFocus: listFocusHandler, onBlur: listBlurHandler, role: "listbox", "aria-multiselectable": multiple || undefined }, renderedChildren))));
+});
+MenuContainer.displayName = 'MenuContainer';
+export default MenuContainer;

package/esm/Menu/MenuItem.js

@@ -0,0 +1,64 @@
+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 React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+const StyledMenuItem = styled.div `
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  padding: 0.4em 0.8em;
+  transition: all 240ms ease-out;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
+  background-color: ${({ theme, selected, hovered }) => {
+    if (selected && hovered) {
+        return theme.color.accentPrimary.darken(0.1).toString();
+    }
+    if (selected) {
+        return theme.color.accentPrimary.toString();
+    }
+    if (hovered) {
+        return theme.color.surface.darken(40).toString();
+    }
+    return 'inherit';
+}};
+  color: ${({ theme, selected }) => {
+    if (selected) {
+        return theme.color.accentPrimaryContrast.toString();
+    }
+    return theme.color.textPrimary.toString();
+}};
+  ${({ selected }) => selected &&
+    css `
+      & mark {
+        color: inherit;
+      }
+    `}
+`;
+const ItemIconWrapper = styled.span `
+  margin-right: 0.5em;
+`;
+export const MenuItem = React.forwardRef((props, ref) => {
+    const { children, selected, hovered, onMouseEnter, onMouseLeave, onClick, startIcon } = props, nativeProps = __rest(props, ["children", "selected", "hovered", "onMouseEnter", "onMouseLeave", "onClick", "startIcon"]);
+    const renderStartIcon = React.useCallback(() => {
+        if (!startIcon) {
+            return null;
+        }
+        return React.createElement(ItemIconWrapper, null, startIcon);
+    }, [startIcon]);
+    return (React.createElement(StyledMenuItem, Object.assign({}, nativeProps, { ref: ref, onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, onClick: onClick, role: "option", "aria-selected": selected, selected: selected, hovered: hovered }),
+        renderStartIcon(),
+        children));
+});
+MenuItem.displayName = 'MenuItem';
+export default MenuItem;

package/esm/Menu/MenuList.js

@@ -0,0 +1,81 @@
+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 React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { elevation } from '../ThemeProvider/tokens';
+const StyledMenuList = styled.div `
+  display: flex;
+  flex-direction: column;
+  transition: opacity 120ms ease-out;
+  opacity: ${props => (props.$isOpen ? 1 : 0)};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  box-shadow: ${({ theme }) => elevation(theme, 'popup', `0 0.5em 1.5em ${theme.color.surface.darken(50).alpha(0.6).toString()}`)};
+
+  ${({ $maxWidth }) => {
+    if (typeof $maxWidth === 'number') {
+        return css `
+        max-width: ${$maxWidth}px;
+      `;
+    }
+    if (typeof $maxWidth === 'string') {
+        return css `
+        max-width: ${$maxWidth};
+      `;
+    }
+    return undefined;
+}};
+  &:focus {
+    outline-style: solid;
+    outline-width: 0.14em;
+    outline-color: ${({ theme }) => theme.color.accentPrimary.toString()};
+  }
+
+  & ::-webkit-scrollbar {
+    width: 0.6rem;
+    height: 0.6rem;
+  }
+
+  & ::-webkit-scrollbar-corner {
+    background: none;
+  }
+
+  & ::-webkit-scrollbar-track {
+    background: ${({ theme }) => theme.isDark
+    ? theme.color.backgroundPrimary.darken(10).toString()
+    : theme.color.backgroundPrimary.darken(5).toString()};
+  }
+
+  & ::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => theme.isDark
+    ? theme.color.backgroundSecondary.lighten(30).toString()
+    : theme.color.backgroundSecondary.darken(30).toString()};
+    border-radius: 0.3rem;
+  }
+
+  & ::-webkit-scrollbar-thumb:horizontal:hover,
+  & ::-webkit-scrollbar-thumb:vertical:hover {
+    background: ${({ theme }) => theme.color.accentPrimary.toString()};
+  }
+
+  box-sizing: border-box;
+  overflow-y: auto;
+  padding: 0.4em;
+  max-height: 18em;
+`;
+export const MenuList = React.forwardRef((props, ref) => {
+    const { isOpen, anchorPos, maxWidth, children } = props, nativeProps = __rest(props, ["isOpen", "anchorPos", "maxWidth", "children"]);
+    return (React.createElement(StyledMenuList, Object.assign({ tabIndex: -1, "$isOpen": isOpen, "$maxWidth": maxWidth, "$anchorPos": anchorPos }, nativeProps, { ref: ref }), children));
+});
+MenuList.displayName = 'MenuList';
+export default MenuList;

package/esm/Menu/context.js

@@ -0,0 +1,41 @@
+import React from 'react';
+export const actionSetmenuState = (payload) => ({
+    type: 'setMenuState',
+    payload,
+});
+export const defaultState = {
+    selectedIndexes: [],
+    markedIndex: -1,
+    hoveredIndex: -1,
+};
+const reducer = (state, action) => {
+    switch (action.type) {
+        case 'setMenuState': {
+            const keys = Object.keys(action.payload);
+            // Keep the state object when nothing changes, so the menu is not re-rendered
+            if (keys.every(key => state[key] === action.payload[key])) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), action.payload);
+        }
+        default:
+            return state;
+    }
+};
+const context = React.createContext({
+    state: defaultState,
+    dispatch: () => undefined,
+});
+export const MenuContextProvider = props => {
+    const { children } = props;
+    const [state, dispatch] = React.useReducer(reducer, defaultState);
+    return React.createElement(context.Provider, { value: { state, dispatch } }, children);
+};
+export const useContext = () => {
+    const { state, dispatch } = React.useContext(context);
+    return {
+        state,
+        dispatch,
+    };
+};
+export default useContext;

package/esm/Menu/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { MenuContextProvider } from './context';
+import MenuContainer from './MenuContainer';
+export * from './MenuContainer';
+export * from './MenuItem';
+export * from './MenuList';
+const Menu = React.forwardRef((props, ref) => (React.createElement(MenuContextProvider, null,
+    React.createElement(MenuContainer, Object.assign({}, props, { ref: ref })))));
+Menu.displayName = 'Menu';
+export default Menu;

package/esm/Modal/BaseModal/ModalInner.js

@@ -0,0 +1,40 @@
+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 React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+const StyledModalInner = styled.div `
+  opacity: 0;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  outline: none;
+  pointer-events: all;
+  position: relative;
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  margin-top: 2em;
+  transition:
+    opacity 100ms ease-out,
+    margin-top 240ms ease-out;
+  ${({ $isOpen }) => $isOpen &&
+    css `
+      margin-top: 0;
+      opacity: 1;
+      transition:
+        opacity 100ms ease-out,
+        margin-top 240ms ease-out;
+    `}
+`;
+const ModalInner = (props, ref) => {
+    const { children, isOpen, onRequestClose } = props, restProps = __rest(props, ["children", "isOpen", "onRequestClose"]);
+    return (React.createElement(StyledModalInner, Object.assign({}, restProps, { "$isOpen": isOpen, ref: ref }), children));
+};
+export default React.forwardRef(ModalInner);

package/esm/Modal/BaseModal/ModalInnerContainer.js

@@ -0,0 +1,38 @@
+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 React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+const StyledModalInnerContainer = styled.div `
+  opacity: 0;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  position: fixed;
+  inset: 0;
+  outline: none;
+  transition: opacity 100ms ease-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  pointer-events: none;
+
+  ${({ $isOpen }) => $isOpen &&
+    css `
+      opacity: 1;
+      transition: opacity 100ms ease-out;
+    `}
+`;
+const ModalInnerContainer = (props, ref) => {
+    const { children, isOpen, onRequestClose } = props, restProps = __rest(props, ["children", "isOpen", "onRequestClose"]);
+    return (React.createElement(StyledModalInnerContainer, Object.assign({}, restProps, { "$isOpen": isOpen, ref: ref }), children));
+};
+export default React.forwardRef(ModalInnerContainer);

package/esm/Modal/BaseModal/ModalOverlay.js

@@ -0,0 +1,28 @@
+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 React from 'react';
+import styled from '@emotion/styled';
+const StyledModalOverlay = styled.div `
+  position: fixed;
+  inset: 0;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  background-color: ${({ theme }) => theme.isDark
+    ? theme.color.backgroundPrimary.darken(30).alpha(0.8).rgbString()
+    : theme.color.textPrimary.darken(30).alpha(0.8).rgbString()};
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+  transition: opacity 120ms ease-out;
+`;
+const ModalOverlay = (props, ref) => {
+    const { isOpen, onRequestClose, closeOnOverlayClick } = props, restProps = __rest(props, ["isOpen", "onRequestClose", "closeOnOverlayClick"]);
+    return (React.createElement(StyledModalOverlay, Object.assign({}, restProps, { ref: ref, "$isOpen": isOpen, onClick: closeOnOverlayClick ? onRequestClose : undefined })));
+};
+export default React.forwardRef(ModalOverlay);