@itcase/ui 1.9.55 → 1.9.57

package/dist/components/Loader/appearance/loaderExtra.js

@@ -0,0 +1,8 @@
+const loaderAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+        borderColor: 'surfaceBorderSecondary',
+        itemFill: 'extraItemPrimary',
+    },
+};
+export { loaderAppearanceExtra };

package/dist/components/Loader/appearance/loaderInfo.js

@@ -0,0 +1,8 @@
+const loaderAppearanceInfo = {
+    infoPrimary: {
+        fill: 'infoPrimary',
+        borderColor: 'surfaceBorderSecondary',
+        itemFill: 'infoItemPrimary',
+    },
+};
+export { loaderAppearanceInfo };

package/dist/components/Loader/appearance/loaderSize.js

@@ -0,0 +1,15 @@
+const loaderAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        textSize: 'm',
+    },
+    sizeM: {
+        size: 'm',
+        textSize: 's',
+    },
+    sizeS: {
+        size: 's',
+        textSize: 'xs',
+    },
+};
+export { loaderAppearanceSize };

package/dist/components/Loader/appearance/loaderSpecial.js

@@ -0,0 +1,8 @@
+const loaderAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+        borderColor: 'surfaceBorderSecondary',
+        itemFill: 'specialItemPrimary',
+    },
+};
+export { loaderAppearanceSpecial };

package/dist/components/Loader/appearance/loaderStyle.js

@@ -0,0 +1,14 @@
+const loaderAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { loaderAppearanceStyle };

package/dist/components/Loader/appearance/loaderSuccess.js

@@ -0,0 +1,8 @@
+const loaderAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+        borderColor: 'surfaceBorderSecondary',
+        itemFill: 'successItemPrimary',
+    },
+};
+export { loaderAppearanceSuccess };

package/dist/components/Loader/appearance/loaderSurface.js

@@ -0,0 +1,18 @@
+const loaderAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderPrimary',
+        itemFill: 'surfaceItemPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderPrimary',
+        itemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        borderColor: 'surfaceBorderPrimary',
+        itemFill: 'surfaceItemPrimary',
+    },
+};
+export { loaderAppearanceSurface };

package/dist/components/Loader/appearance/loaderWarning.js

@@ -0,0 +1,8 @@
+const loaderAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningPrimary',
+        borderColor: 'surfaceBorderSecondary',
+        itemFill: 'warningItemPrimary',
+    },
+};
+export { loaderAppearanceWarning };

package/dist/components/Loader/index.js

@@ -0,0 +1,2 @@
+export { Loader, loaderConfig } from './Loader';
+export { loaderAppearance } from './Loader.appearance';

package/dist/components/Logo/Logo.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Logo/Logo.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { urlWithAssetPrefix } from 'src/hoc/urlWithAssetPrefix';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { LinkWrapper } from 'src/components/Link';
+const logoConfig = {
+    appearance: undefined,
+    setAppearance: (appearanceConfig) => {
+        logoConfig.appearance = appearanceConfig;
+    },
+};
+const Logo = urlWithAssetPrefix(forwardRef(function Logo(props, ref) {
+    const { appearance, className, dataTestId, dataTour, href, link, isSkeleton, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, logoConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { alignClass, alignDirectionClass, alignItemsClass, src, title, alt, sizeClass, widthClass, } = propsGenerator;
+    const { styles: logo } = useStyles(props);
+    return (_jsx("div", { className: clsx(className, 'logo', isSkeleton && 'logo_mode_skeleton', alignClass && `align_${alignClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignItemsClass && `logo_align-items_${alignItemsClass}`, sizeClass && `logo_size_${sizeClass}`, widthClass && `width_${widthClass}`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: logo, children: link || href ? (_jsx(LinkWrapper, { className: "logo__link", href: link || href, children: _jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title }) })) : (_jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title })) }));
+}));
+export { Logo, logoConfig };

package/dist/components/Logo/index.js

@@ -0,0 +1 @@
+export { Logo, logoConfig } from './Logo';

package/dist/components/MenuItem/MenuItem.appearance.js

@@ -0,0 +1,15 @@
+import { menuItemAppearanceAccent } from './appearance/menuItemAccent';
+import { menuItemAppearanceError } from './appearance/menuItemError';
+import { menuItemAppearanceShape } from './appearance/menuItemShape';
+import { menuItemAppearanceSize } from './appearance/menuItemSize';
+import { menuItemAppearanceStyle } from './appearance/menuItemStyle';
+import { menuItemAppearanceSurface } from './appearance/menuItemSurface';
+const menuItemAppearance = {
+    ...menuItemAppearanceSize,
+    ...menuItemAppearanceStyle,
+    ...menuItemAppearanceAccent,
+    ...menuItemAppearanceError,
+    ...menuItemAppearanceSurface,
+    ...menuItemAppearanceShape,
+};
+export { menuItemAppearance };

package/dist/components/MenuItem/MenuItem.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/MenuItem/MenuItem.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useRef } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Icon } from 'src/components/Icon';
+import { Link } from 'src/components/Link';
+import { Text } from 'src/components/Text';
+import { Tooltip } from 'src/components/Tooltip';
+import { menuItemAppearance } from './MenuItem.appearance';
+const menuItemConfig = {
+    appearance: menuItemAppearance,
+    setAppearance: function (appearanceConfig) {
+        this.appearance = appearanceConfig;
+    },
+};
+function MenuItem(props) {
+    const { appearance, className, dataTestId, dataTour, label, easing, href, link, LinkComponent, rel, showTooltip, target, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
+    const tooltipRef = useRef(null);
+    const onMouseEnter = useCallback(() => {
+        if (showTooltip) {
+            tooltipRef.current?.openTooltip();
+        }
+    }, [showTooltip]);
+    const onMouseLeave = useCallback(() => {
+        if (showTooltip) {
+            tooltipRef.current?.closeTooltip();
+        }
+    }, [showTooltip]);
+    const appearanceConfig = useAppearanceConfig(appearance, menuItemConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorDisabled, labelTextColorHover, labelTextSize, labelWeight, labelWrap, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, tooltipFill, tooltipShape, tooltipShapeStrength, tooltipSize, tooltipText, tooltipTextColor, tooltipTextSize, tooltipTitle, tooltipTitleTextColor, typeClass, widthClass, isSkeleton, } = propsGenerator;
+    const { styles: menuItem } = useStyles(props);
+    return (_jsxs("div", { className: clsx('menu-item', easing && `easing_${easing}`, isActive && 'menu-item_state_active', isDisabled && `menu-item_state_disabled`, directionClass && `menu-item_direction_${directionClass}`, className, (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc) &&
+            'menu-item_label-icon', sizeClass && `menu-item_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, !isActive
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
+            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass
+            ? `shape-strength_${shapeStrengthClass}`
+            : shapeClass === 'rounded' && 'shape-strength_default', typeClass && `menu-item_type_${typeClass}`, widthClass && `width_${widthClass}`, justifyContentClass &&
+            `menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: menuItem, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [_jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, onClick: onClick, children: [before, children || (_jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (_jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (_jsx(Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextColorHover, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, isDisabled: isDisabled, children: label })), (iconAfter || iconAfterSrc) && (_jsx(Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (_jsx(Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", alignment: "right-center", size: tooltipSize, fill: tooltipFill, zIndex: "100", title: tooltipTitle, titleColor: tooltipTitleTextColor, paddingLeft: "2m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize, 
+                // centering="vertical"
+                shape: tooltipShape, shapeStrength: tooltipShapeStrength, isTooltipDisableState: true }))] }));
+}
+export { MenuItem, menuItemConfig };

package/dist/components/MenuItem/appearance/menuItemAccent.js

@@ -0,0 +1,27 @@
+const menuItemAppearanceAccent = {
+    accentMutedPrimary: {
+        fill: 'accentTertiary',
+        fillHover: 'accentTertiary',
+        labelTextColor: 'accentTextQuaternary',
+        borderColor: 'accentBorderSecondary',
+        iconAfterFillIcon: 'accentItemQuaternary',
+        iconBeforeFillIcon: 'accentItemQuaternary',
+    },
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimary',
+        labelTextColor: 'accentTextPrimary',
+        borderColor: 'accentBorderSecondary',
+        iconAfterFillIcon: 'accentItemPrimary',
+        iconBeforeFillIcon: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimary',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextSecondary',
+        iconAfterFillIcon: 'accentItemSecondary',
+        iconBeforeFillIcon: 'accentItemSecondary',
+    },
+};
+export { menuItemAppearanceAccent };

package/dist/components/MenuItem/appearance/menuItemError.js

@@ -0,0 +1,19 @@
+const menuItemAppearanceError = {
+    errorMutedPrimary: {
+        fill: 'errorTertiary',
+        labelTextColor: 'errorTextQuaternary',
+        labelTextColorHover: 'errorTextQuaternary',
+        iconAfterFillIcon: 'errorItemQuaternary',
+        iconBeforeFillIcon: 'errorItemQuaternary',
+    },
+    errorPrimary: {
+        fill: 'errorPrimary',
+        fillHover: 'errorPrimary',
+        labelTextColor: 'errorTextPrimary',
+        labelTextColorHover: 'errorTextPrimary',
+        borderColor: 'errorBorderSecondary',
+        iconAfterFillIcon: 'errorItemPrimary',
+        iconBeforeFillIcon: 'errorItemPrimary',
+    },
+};
+export { menuItemAppearanceError };

package/dist/components/MenuItem/appearance/menuItemShape.js

@@ -0,0 +1,25 @@
+const menuItemAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { menuItemAppearanceShape };

package/dist/components/MenuItem/appearance/menuItemSize.js

@@ -0,0 +1,47 @@
+const menuItemAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        labelTextSize: 'l',
+        iconAfterSize: '20',
+        iconBeforeSize: '20',
+    },
+    sizeXL: {
+        size: 'xl',
+        labelTextSize: 'l',
+        iconAfterSize: '20',
+        iconBeforeSize: '20',
+    },
+    sizeL: {
+        size: 'l',
+        labelTextSize: 's',
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
+        tooltipSize: 's',
+        tooltipTextSize: 'm',
+    },
+    sizeM: {
+        size: 'm',
+        labelTextSize: 's',
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 'xs',
+        iconAfterSize: '12',
+        iconBeforeSize: '12',
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'xs',
+        iconAfterSize: '12',
+        iconBeforeSize: '12',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        labelTextSize: 'xxs',
+        iconAfterSize: '12',
+        iconBeforeSize: '12',
+    },
+};
+export { menuItemAppearanceSize };

package/dist/components/MenuItem/appearance/menuItemStyle.js

@@ -0,0 +1,14 @@
+const menuItemAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { menuItemAppearanceStyle };

package/dist/components/MenuItem/appearance/menuItemSurface.js

@@ -0,0 +1,45 @@
+const menuItemAppearanceSurface = {
+    surfaceMutedPrimary: {
+        fill: 'surfaceSecondary',
+        fillActive: 'surfacePrimary',
+        fillActiveHover: 'surfacePrimary',
+        labelTextColor: 'surfaceTextQuaternary',
+        iconAfterFillIcon: 'surfaceItemQuaternary',
+        iconBeforeFillIcon: 'surfaceItemQuaternary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillActive: 'surfaceSecondary',
+        fillActiveHover: 'surfaceSecondary',
+        fillHover: 'surfaceSecondary',
+        labelTextActiveColor: 'accentTextSecondary',
+        labelTextActiveColorHover: 'accentTextSecondary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderQuaternary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceQuaternary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfacePrimary',
+        fillActive: 'surfaceSecondary',
+        fillActiveHover: 'surfaceTertiary',
+        fillHover: 'surfaceSecondary',
+        labelTextActiveColor: 'accentTextSecondary',
+        labelTextActiveColorHover: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderQuaternary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
+export { menuItemAppearanceSurface };

package/dist/components/MenuItem/index.js

@@ -0,0 +1,2 @@
+export { MenuItem, menuItemConfig } from './MenuItem';
+export { menuItemAppearance } from './MenuItem.appearance';

package/dist/components/Modal/Modal.appearance.js

@@ -0,0 +1,11 @@
+import { modalAppearanceShape } from './appearance/modalShape';
+import { modalAppearanceSize } from './appearance/modalSize';
+import { modalAppearanceStyle } from './appearance/modalStyle';
+import { modalAppearanceSurface } from './appearance/modalSurface';
+const modalAppearance = {
+    ...modalAppearanceSurface,
+    ...modalAppearanceShape,
+    ...modalAppearanceStyle,
+    ...modalAppearanceSize,
+};
+export { modalAppearance };

package/dist/components/Modal/Modal.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Modal/Modal.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { startTransition, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
+import clsx from 'clsx';
+import ReactDOM from 'react-dom';
+import { icons24 } from '@itcase/icons/default';
+import { mergeAppearanceKeys } from 'src/utils';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Icon } from 'src/components/Icon';
+import { Overlay } from 'src/components/Overlay';
+import { Title } from 'src/components/Title';
+import { modalAppearance } from './Modal.appearance';
+const modalConfig = {
+    appearance: modalAppearance,
+    setAppearance: (appearanceConfig) => {
+        modalConfig.appearance = appearanceConfig;
+    },
+};
+const getOrCreateModalElement = (modalIdQuerySelector, className = '') => {
+    // prettier-ignore
+    const classList = className && typeof className === 'string'
+        ? className.split(' ').filter(Boolean)
+        : [];
+    let modalElement = document.getElementById(modalIdQuerySelector);
+    if (!modalElement) {
+        // Add modal element into the DOM on mount.
+        modalElement = document.createElement('div');
+        modalElement.setAttribute('id', modalIdQuerySelector);
+        modalElement.classList.add('modal');
+        if (classList.length) {
+            modalElement.classList.add(...classList);
+        }
+        document.body.prepend(modalElement);
+    }
+    return modalElement;
+};
+// Modal component that is an abstraction around the portal API.
+const Modal = React.forwardRef(function Modal(props, ref) {
+    const { id, appearance, className, dataTestId, dataTour, title, absoluteHeader = false, modalIdQuerySelector = 'modal-global', print, scroll = false, stickyHeader = false, before, after, closeIcon = true, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
+    // Query DOM element
+    const [modalElement, setModalElement] = useState(null);
+    const [isOpen, setIsOpen] = useState(initialIsOpen);
+    const modalContentRef = useRef(null);
+    const addModalProps = useCallback((element) => {
+        if (isOpen) {
+            element.classList.add('modal_state_visible');
+            if (isScrollOnOpen) {
+                element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+            if (isSetFocusOnOpen) {
+                setTimeout(() => {
+                    if (modalContentRef.current) {
+                        modalContentRef.current.focus();
+                    }
+                }, 0);
+            }
+        }
+        else if (!element.children.length) {
+            element.classList.remove('modal_state_visible');
+        }
+    }, [isOpen, isScrollOnOpen, isSetFocusOnOpen]);
+    const openModal = useCallback(() => {
+        startTransition(() => {
+            setIsOpen(true);
+        });
+        if (typeof onOpenModal === 'function') {
+            onOpenModal();
+        }
+    }, [onOpenModal]);
+    const closeModal = useCallback((event) => {
+        if (event) {
+            const hasRelatedTarget = event.relatedTarget &&
+                modalElement &&
+                modalElement.contains(event.relatedTarget);
+            if (hasRelatedTarget) {
+                return event;
+            }
+        }
+        setIsOpen(false);
+        onCloseModal && onCloseModal();
+    }, [modalElement, onCloseModal]);
+    const handleClickOverlay = useCallback((event) => {
+        if (isCloseOnBlur) {
+            closeModal();
+        }
+        onClickOverlay && onClickOverlay(event);
+    }, [closeModal, isCloseOnBlur, onClickOverlay]);
+    useEffect(() => {
+        if (!modalElement) {
+            return;
+        }
+        addModalProps(modalElement);
+    }, [isOpen]); // eslint-disable-line
+    useLayoutEffect(() => {
+        let classNameModal = className;
+        if (!print) {
+            classNameModal = clsx(className, 'no-print');
+        }
+        const element = getOrCreateModalElement(modalIdQuerySelector, classNameModal);
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setModalElement(element);
+        if (element) {
+            addModalProps(element);
+        }
+    }, [addModalProps, className, modalIdQuerySelector, print]);
+    useEffect(() => {
+        if (!isCloseOnBlur || !isOpen) {
+            return;
+        }
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            if (!modalElement || !target || !target.isConnected) {
+                return;
+            }
+            const isOutside = !modalElement.contains(target);
+            if (isOutside) {
+                setIsOpen(false);
+                onCloseModal && onCloseModal();
+            }
+        };
+        window.addEventListener('click', handleClickOutside);
+        return () => {
+            window.removeEventListener('click', handleClickOutside);
+        };
+    }, [onCloseModal, isCloseOnBlur, isOpen, modalElement]);
+    useImperativeHandle(ref, () => ({ modalElement, openModal, closeModal, isOpen }), [isOpen, openModal, closeModal, modalElement]);
+    const appearanceConfig = useAppearanceConfig(appearance, modalConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, titleTextColor, titleTextColorHover, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWidth, titleTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, overlayFill, overlayOpacity, shapeClass, shapeStrengthClass, sizeClass, closeIconAppearance, closeIconAppearanceSize, closeIconFillSize, closeIconImage, closeIconShape, closeIconSize, } = propsGenerator;
+    const { styles: modalStyles } = useStyles(props);
+    return (modalElement &&
+        ReactDOM.createPortal(isOpen ? (_jsxs(React.Fragment, { children: [_jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-testid": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [before, (title || closeIcon) && (_jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (_jsx(Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (_jsx("div", { className: "modal__close", onClick: closeModal, children: _jsx(Icon, { appearance: mergeAppearanceKeys(closeIconAppearance, closeIconAppearanceSize), fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), _jsx("div", { className: "modal__content-wrapper", children: children }), after] }), _jsx(Overlay, { className: "modal__overlay", 
+                    // ref={modalOverlayRef}
+                    fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: handleClickOverlay })] })) : null, 
+        // A DOM element
+        modalElement));
+});
+export { Modal, modalConfig };

package/dist/components/Modal/ModalLoader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader } from 'src/components/Loader';
+function ModalLoader() {
+    return (_jsx("div", { className: "modal-loading", children: _jsx("div", { className: "modal-loading__inner", children: _jsx(Loader, {}) }) }));
+}
+export { ModalLoader };

package/dist/components/Modal/appearance/modalShape.js

@@ -0,0 +1,25 @@
+const modalAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { modalAppearanceShape };

package/dist/components/Modal/appearance/modalSize.js

@@ -0,0 +1,28 @@
+import { icons24, icons32, icons40 } from '@itcase/icons/default';
+const modalAppearanceSize = {
+    sizeXL: {
+        size: 'xl',
+        titleTextSize: 'h2',
+        closeIconAppearanceSize: 'size48_40',
+        closeIconImage: icons40.Action.Close,
+    },
+    sizeL: {
+        size: 'l',
+        titleTextSize: 'h3',
+        closeIconAppearanceSize: 'size40_32',
+        closeIconImage: icons32.Action.Close,
+    },
+    sizeM: {
+        size: 'm',
+        titleTextSize: 'h4',
+        closeIconAppearanceSize: 'size24_24',
+        closeIconImage: icons24.Action.Close,
+    },
+    sizeS: {
+        size: 's',
+        titleTextSize: 'h5',
+        closeIconAppearanceSize: 'size24_24',
+        closeIconImage: icons24.Action.Close,
+    },
+};
+export { modalAppearanceSize };

package/dist/components/Modal/appearance/modalStyle.js

@@ -0,0 +1,14 @@
+const modalAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { modalAppearanceStyle };

package/dist/components/Modal/appearance/modalSurface.js

@@ -0,0 +1,8 @@
+const modalAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderPrimary',
+        closeIconAppearance: 'surfacePrimary ghost circular',
+    },
+};
+export { modalAppearanceSurface };

package/dist/components/Modal/index.js

@@ -0,0 +1,4 @@
+import { Modal, modalConfig } from './Modal';
+import { modalAppearance } from './Modal.appearance';
+import { ModalLoader } from './ModalLoader';
+export { Modal, modalConfig, modalAppearance, ModalLoader };