@itcase/ui 1.9.56 → 1.9.58

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 };

package/dist/components/ModalSheetBottom/ModalSheetBottom.appearance.js

@@ -0,0 +1,5 @@
+import { modalSheetBottomAppearanceSize } from './appearance/modalSheetBottomSize';
+const modalSheetBottomAppearance = {
+    ...modalSheetBottomAppearanceSize,
+};
+export { modalSheetBottomAppearance };

package/dist/components/ModalSheetBottom/ModalSheetBottom.interface.js

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

package/dist/components/ModalSheetBottom/ModalSheetBottom.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useImperativeHandle, useState } from 'react';
+import clsx from 'clsx';
+import { Sheet } from 'react-modal-sheet';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Title } from 'src/components/Title';
+import { modalSheetBottomAppearance } from './ModalSheetBottom.appearance';
+const modalSheetBottomConfig = {
+    appearance: modalSheetBottomAppearance,
+    setAppearance: (appearanceConfig) => {
+        modalSheetBottomConfig.appearance = appearanceConfig;
+    },
+};
+const ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
+    const { appearance, dataTestId, dataTour, initialIsOpen, title, closeButton, isDisabled, onCloseModalSheetBottom, onOpenModalSheetBottom, children, } = props;
+    const [isOpen, setIsOpen] = useState(initialIsOpen);
+    const openModalSheetBottom = useCallback(() => {
+        setIsOpen(true);
+        onOpenModalSheetBottom && onOpenModalSheetBottom();
+    }, [onOpenModalSheetBottom]);
+    const closeModalSheetBottom = useCallback(() => {
+        setIsOpen(false);
+        onCloseModalSheetBottom && onCloseModalSheetBottom();
+    }, [onCloseModalSheetBottom]);
+    useImperativeHandle(ref, () => ({
+        openModal: openModalSheetBottom,
+        closeModal: closeModalSheetBottom,
+        isOpen: isOpen,
+    }), [isOpen, openModalSheetBottom, closeModalSheetBottom]);
+    const appearanceConfig = useAppearanceConfig(appearance, modalSheetBottomConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { titleTextColor, titleTextColorHover, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWidth, titleTextWrap, zeroPadding, } = propsGenerator;
+    const { styles } = useStyles(props);
+    return (_jsxs(Sheet, { ...props, className: "modal-sheet-bottom", "data-testid": dataTestId, "data-tour": dataTour, isOpen: isOpen, onClose: closeModalSheetBottom, children: [_jsxs(Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [_jsx(Sheet.Header, { className: "modal-sheet-bottom__header", children: closeButton && (_jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })) }), _jsx(Sheet.Content, { className: "modal-sheet-bottom__content", children: _jsxs("div", { className: clsx('modal-sheet-bottom__content-wrapper', zeroPadding && 'modal-sheet-bottom__content-reset-padding'), children: [title && (_jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), children] }) })] }), _jsx(Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] }));
+});
+export { ModalSheetBottom };

package/dist/components/ModalSheetBottom/appearance/modalSheetBottomSize.js

@@ -0,0 +1,9 @@
+const modalSheetBottomAppearanceSize = {
+    sizeL: {
+        titleTextSize: 'h4',
+    },
+    sizeM: {
+        titleTextSize: 'h5',
+    },
+};
+export { modalSheetBottomAppearanceSize };

package/dist/components/ModalSheetBottom/index.js

@@ -0,0 +1,2 @@
+export { ModalSheetBottom } from './ModalSheetBottom';
+export { modalSheetBottomAppearance } from './ModalSheetBottom.appearance';

package/dist/components/Notification/Notification.appearance.js

@@ -0,0 +1,19 @@
+import { notificationAppearanceDefault } from './appearance/notificationDefault';
+import { notificationAppearanceError } from './appearance/notificationError';
+import { notificationAppearanceInfo } from './appearance/notificationInfo';
+import { notificationAppearanceShape } from './appearance/notificationShape';
+import { notificationAppearanceSize } from './appearance/notificationSize';
+import { notificationAppearanceStyle } from './appearance/notificationStyle';
+import { notificationAppearanceSuccess } from './appearance/notificationSuccess';
+import { notificationAppearanceWarning } from './appearance/notificationWarning';
+const notificationAppearance = {
+    ...notificationAppearanceDefault,
+    ...notificationAppearanceShape,
+    ...notificationAppearanceSize,
+    ...notificationAppearanceStyle,
+    ...notificationAppearanceError,
+    ...notificationAppearanceInfo,
+    ...notificationAppearanceSuccess,
+    ...notificationAppearanceWarning,
+};
+export { notificationAppearance };

package/dist/components/Notification/Notification.interface.js

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

package/dist/components/Notification/Notification.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Button } from 'src/components/Button';
+import { Icon } from 'src/components/Icon';
+import { Loader } from 'src/components/Loader';
+import { Text } from 'src/components/Text';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { mergeAppearanceKeys } from 'src/utils';
+import { notificationAppearance } from './Notification.appearance';
+const notificationConfig = {
+    appearance: notificationAppearance,
+    setAppearance: (appearanceConfig) => {
+        notificationConfig.appearance = appearanceConfig;
+    },
+};
+function Notification(props) {
+    const { id, appearance, className, dataTestId, dataTour, type = 'float', title, text, before, after, isSkeleton, isLoading, onClickButton, onClickClose, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, notificationConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'dot', shapeClass, shapeStrengthClass, sizeClass, widthClass, closeIcon, closeIconAppearance, closeIconAppearanceSize, closeIconSrc, } = propsGenerator;
+    const { styles: notificationStyles } = useStyles(props);
+    return (_jsxs("div", { className: clsx('notification__item', `notification__item_${type}`, widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, sizeClass && `notification__item_size_${sizeClass}`, type && `notification__item_type_${type}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, _jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (_jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (_jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), isLoading && (_jsx(Loader, { appearance: mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (_jsx(Icon, { appearance: mergeAppearanceKeys(closeIconAppearance, closeIconAppearanceSize), className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), onClickButton && buttonLabel && (_jsx(Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
+}
+export { Notification, notificationConfig };

package/dist/components/Notification/NotificationWrapper.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useNotifications, useNotificationsAPI } from 'src/context';
+import { Notification } from './';
+function NotificationWrapper(props) {
+    const notifications = useNotifications();
+    const { hideNotifications } = useNotificationsAPI();
+    const { className, dataTestId, dataTour } = props;
+    return (_jsx("div", { className: clsx('notification', className), "data-testid": dataTestId, "data-tour": dataTour, children: _jsx("div", { className: "notification__wrapper", children: notifications.map((notification) => (_jsx(Notification, { id: notification.id, appearance: notification.appearance, type: notification.type, title: notification.title, status: notification.status, text: notification.text, buttonLabel: notification.buttonLabel, after: notification.after, closeIcon: notification.closeIcon, closeIconSrc: notification.closeIconSrc, isLoading: notification.isLoading, onClickButton: notification.onClickButton, onClickClose: hideNotifications }, notification.id))) }) }));
+}
+export { NotificationWrapper };

package/dist/components/Notification/appearance/notificationDefault.js

@@ -0,0 +1,16 @@
+import { icons24 } from '@itcase/icons/default';
+const notificationAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+        buttonAppearance: 'accentPrimary sizeXXL solid rounded',
+        loaderAppearance: 'accentTertiary sizeS ghost rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary ghost circular',
+    },
+};
+export { notificationAppearanceDefault };